@zanichelli/albe-web-components 4.2.0 → 5.1.0

package/dist/collection/deprecated/z-popover-deprecated/styles.css

@@ -1,134 +1,236 @@
 :host {
-  --z-popover-theme--surface: var(--color-surface01);
-  --z-popover-theme--text: var(--color-text01);
-  --z-popover-padding: var(--space-unit);
-  --z-popover-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));
-  --arrow-size: 6px;
-  --edge-offset: calc(-1 * (var(--arrow-size) + calc(var(--space-unit) * 2)));
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
 
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--z-popover-padding);
-  min-width: calc(var(--space-unit) * 8);
-  min-height: calc(var(--space-unit) * 4);
-  color: var(--z-popover-theme--text);
-  fill: currentColor;
-  font-family: var(--font-family-sans);
-  text-align: center;
+  display: inline-block;
+
+  --shadow-arrow-color: rgba(66, 69, 72, 0.2);
+  --shadow-arrow-below-color: rgba(66, 69, 72, 0.1);
+}
+
+.popover-content-container {
+  box-sizing: border-box;
+  visibility: hidden;
+  position: absolute;
+  min-width: 64px;
+  min-height: 32px;
+  z-index: 999;
+}
+
+.popover-content-container.visible {
+  visibility: visible;
+}
+
+/** Border-radius */
+
+.popover-content-container.border-radius-none {
+  border-radius: 0;
+}
+
+.popover-content-container.border-radius-small {
   border-radius: var(--border-radius-small);
-  background: var(--z-popover-theme--surface);
-  filter: var(--z-popover-shadow-filter);
 }
 
-:host(:not([open])),
-:host([open="false"]) {
-  display: none;
+.popover-content-container.border-radius-medium {
+  border-radius: var(--border-radius);
 }
 
-:host([center][current-position='top']),
-:host([center][current-position='bottom']) {
-  transform: translateX(-50%);
+/*
+Box-shadow
+*/
+
+.popover-content-container.shadow-1 {
+  box-shadow: var(--shadow-1);
+}
+
+.popover-content-container.shadow-2 {
+  box-shadow: var(--shadow-2);
+}
+
+.popover-content-container.shadow-3 {
+  box-shadow: var(--shadow-3);
+}
+
+.popover-content-container.shadow-4 {
+  box-shadow: var(--shadow-4);
+}
+
+.popover-content-container.shadow-6 {
+  box-shadow: var(--shadow-6);
+}
+
+.popover-content-container.shadow-8 {
+  box-shadow: var(--shadow-8);
+}
+
+.popover-content-container.shadow-12 {
+  box-shadow: var(--shadow-12);
+}
+
+.popover-content-container.shadow-16 {
+  box-shadow: var(--shadow-16);
 }
 
-:host([center][current-position='right']),
-:host([center][current-position='left']) {
+.popover-content-container.shadow-24 {
+  box-shadow: var(--shadow-24);
+}
+
+/*
+Popover-positions
+*/
+
+.popover-content-container.after-down {
+  top: 0;
+  left: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.after-center {
+  top: 50%;
+  left: calc(100% + var(--space-unit));
   transform: translateY(-50%);
 }
 
-/* Arrow style */
+.popover-content-container.after-up {
+  bottom: 0;
+  left: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.below-right {
+  left: 0;
+  top: calc(100% + var(--space-unit));
+}
 
-:host([current-position])::before {
-  --arrow-edge-offset: calc(100% - var(--arrow-size) - var(--space-unit));
-  --arrow-center-x-offset: calc(50% - calc(var(--arrow-size) / 2));
-  --arrow-center-y-offset: calc(100% - calc(var(--arrow-size) / 2));
+.popover-content-container.below-center {
+  left: 50%;
+  top: calc(100% + var(--space-unit));
+  transform: translateX(-50%);
+}
 
-  display: block;
-  content: '';
-  position: absolute;
-  width: var(--arrow-size);
-  height: var(--arrow-size);
-  background: var(--z-popover-theme--surface);
-  transform: rotate(45deg);
+.popover-content-container.below-left {
+  right: 0;
+  top: calc(100% + var(--space-unit));
 }
 
-:host([show-arrow=false])::before,
-:host(:not([show-arrow]))::before {
-  display: none;
+.popover-content-container.before-down {
+  top: 0;
+  right: calc(100% + var(--space-unit));
 }
 
-:host([current-position^='top'])::before {
-  top: var(--arrow-center-y-offset);
+.popover-content-container.before-center {
+  top: 50%;
+  right: calc(100% + var(--space-unit));
+  transform: translateY(-50%);
+}
+
+.popover-content-container.before-up {
+  bottom: 0;
+  right: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.above-right {
+  left: 0;
+  bottom: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.above-center {
+  left: 50%;
+  bottom: calc(100% + var(--space-unit));
+  transform: translateX(-50%);
 }
 
-:host([current-position^='bottom'])::before {
-  bottom: var(--arrow-center-y-offset);
+.popover-content-container.above-left {
+  right: 0;
+  bottom: calc(100% + var(--space-unit));
 }
 
-:host([current-position='top'])::before,
-:host([current-position='bottom'])::before {
-  left: var(--arrow-center-x-offset);
+/*
+Arrows
+*/
+.popover-content-container:before {
+  display: none;
+  position: absolute;
+  content: "";
+  width: 8px;
+  height: 8px;
+  z-index: -1;
+  background-color: inherit;
+  transform: rotate(45deg);
 }
 
-:host([current-position='right'])::before,
-:host([current-position='left'])::before {
-  top: var(--arrow-center-x-offset);
+.popover-content-container.after-down:before {
+  top: 12px;
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-:host([current-position='right'])::before {
-  right: var(--arrow-center-y-offset);
+.popover-content-container.after-center:before {
+  top: calc(50% - 4px);
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-:host([current-position='left'])::before {
-  left: var(--arrow-center-y-offset);
+.popover-content-container.after-up:before {
+  bottom: 12px;
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-:host([current-position='top_right'])::before,
-:host([current-position='bottom_right'])::before {
-  right: calc(var(--arrow-edge-offset) + var(--arrow-size));
+.popover-content-container.below-right:before {
+  left: 12px;
+  top: -4px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
 }
 
-:host([current-position='top_right']:not([center]))::before,
-:host([current-position='bottom_right']:not([center]))::before,
-:host([current-position='top_right'][center="false"])::before,
-:host([current-position='bottom_right'][center="false"])::before {
-  right: calc(var(--arrow-edge-offset) - var(--arrow-size) + 1px);
+.popover-content-container.below-center:before {
+  left: calc(50% - 4px);
+  top: -4px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
 }
 
-:host([current-position='top_left'])::before,
-:host([current-position='bottom_left'])::before {
-  left: calc(var(--arrow-edge-offset) + var(--arrow-size));
+.popover-content-container.below-left:before {
+  right: 12px;
+  top: -4px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
 }
 
-:host([current-position='top_left']:not([center]))::before,
-:host([current-position='bottom_left']:not([center]))::before,
-:host([current-position='top_left'][center="false"])::before,
-:host([current-position='bottom_left'][center="false"])::before {
-  left: calc(var(--arrow-edge-offset) - var(--arrow-size) + 1px);
+.popover-content-container.before-down:before {
+  top: 12px;
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
 }
 
-:host([current-position='right_top'])::before,
-:host([current-position='left_top'])::before {
-  bottom: var(--arrow-size);
+.popover-content-container.before-center:before {
+  top: calc(50% - 4px);
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
 }
 
-:host([current-position='right_top'])::before,
-:host([current-position='right_bottom'])::before {
-  right: var(--arrow-center-y-offset);
+.popover-content-container.before-up:before {
+  bottom: 12px;
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
 }
 
-:host([current-position='left_top'])::before,
-:host([current-position='left_bottom'])::before {
-  left: var(--arrow-center-y-offset);
+.popover-content-container.above-right:before {
+  left: 12px;
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-:host([current-position='right_bottom'])::before,
-:host([current-position='left_bottom'])::before {
-  top: var(--arrow-size);
+.popover-content-container.above-center:before {
+  left: calc(50% - 4px);
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
 }
 
-::slotted(*) {
-  flex: 1 auto;
-  overflow: auto;
+.popover-content-container.above-left:before {
+  right: 12px;
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+/** Show/Hide arrow */
+.popover-content-container.show-arrow:before {
+  display: block;
 }

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

@@ -80,7 +80,7 @@ function computeOffset(element, targetParentOffset) {
 export class ZTooltipDeprecated {
   constructor() {
     /** Tooltip position. */
-    this.type = PopoverPositions.AUTO;
+    this.type = PopoverPositions.auto;
     /**
      * The open state of the tooltip.
      */
@@ -91,7 +91,7 @@ export class ZTooltipDeprecated {
       Object
         .values(PopoverPositions)
         .every((position) => newValue !== position)) {
-      this.type = PopoverPositions.AUTO;
+      this.type = PopoverPositions.auto;
     }
   }
   onPositionChange() {
@@ -160,29 +160,29 @@ export class ZTooltipDeprecated {
     const availableHeight = availableTop + availableBottom + boundingRect.height;
     const availableWidth = availableLeft + availableRight + boundingRect.width;
     let position = this.type;
-    if (position === PopoverPositions.AUTO) {
+    if (position === PopoverPositions.auto) {
       /**
        * The `AUTO` position tries to place the tooltip in the "safest" area,
        * where there's more space available.
        */
       const positions = [];
       if (availableTop / availableHeight > 0.9) {
-        positions.unshift(PopoverPositions.TOP);
+        positions.unshift(PopoverPositions.top);
       }
       else if (availableTop / availableHeight > 0.6) {
-        positions.push(PopoverPositions.TOP);
+        positions.push(PopoverPositions.top);
       }
       else if (availableTop / availableHeight < 0.1) {
-        positions.unshift(PopoverPositions.BOTTOM);
+        positions.unshift(PopoverPositions.bottom);
       }
       else {
-        positions.push(PopoverPositions.BOTTOM);
+        positions.push(PopoverPositions.bottom);
       }
       if (availableLeft / availableWidth > 0.6) {
-        positions.push(PopoverPositions.LEFT);
+        positions.push(PopoverPositions.left);
       }
       else if (availableLeft / availableWidth < 0.4) {
-        positions.push(PopoverPositions.RIGHT);
+        positions.push(PopoverPositions.right);
       }
       position = positions.join("_");
     }
@@ -194,46 +194,46 @@ export class ZTooltipDeprecated {
     const offsetRight = boundingRect.right - relativeBoundingRect.right;
     const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
     const offsetLeft = boundingRect.left - relativeBoundingRect.left;
-    if (position === PopoverPositions.TOP ||
-      position === PopoverPositions.TOP_RIGHT ||
-      position === PopoverPositions.TOP_LEFT) {
+    if (position === PopoverPositions.top ||
+      position === PopoverPositions.top_right ||
+      position === PopoverPositions.top_left) {
       style.top = "auto";
       style.bottom = `${offsetBottom + boundingRect.height}px`;
     }
-    if (position === PopoverPositions.BOTTOM ||
-      position === PopoverPositions.BOTTOM_RIGHT ||
-      position === PopoverPositions.BOTTOM_LEFT) {
+    if (position === PopoverPositions.bottom ||
+      position === PopoverPositions.bottom_right ||
+      position === PopoverPositions.bottom_left) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.bottom = "auto";
     }
-    if (position === PopoverPositions.TOP ||
-      position === PopoverPositions.BOTTOM) {
+    if (position === PopoverPositions.top ||
+      position === PopoverPositions.bottom) {
       style.left = `${offsetLeft +
         (boundingRect.width / 2) -
         (this.host.clientWidth / 2)}px`;
     }
-    if (position === PopoverPositions.TOP_RIGHT ||
-      position === PopoverPositions.BOTTOM_RIGHT) {
+    if (position === PopoverPositions.top_right ||
+      position === PopoverPositions.bottom_right) {
       style.right = "auto";
       style.left = `${offsetLeft + boundingRect.width}px`;
     }
-    if (position === PopoverPositions.TOP_LEFT ||
-      position === PopoverPositions.BOTTOM_LEFT) {
+    if (position === PopoverPositions.top_left ||
+      position === PopoverPositions.bottom_left) {
       style.left = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
     }
-    if (position === PopoverPositions.RIGHT ||
-      position === PopoverPositions.LEFT) {
+    if (position === PopoverPositions.right ||
+      position === PopoverPositions.left) {
       style.top = `${offsetTop +
         (boundingRect.height / 2) -
         (this.host.clientHeight / 2)}px`;
       style.bottom = "auto";
     }
-    if (position === PopoverPositions.RIGHT) {
+    if (position === PopoverPositions.right) {
       style.right = "auto";
       style.left = `${offsetLeft + boundingRect.width}px`;
     }
-    if (position === PopoverPositions.LEFT) {
+    if (position === PopoverPositions.left) {
       style.left = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
     }
@@ -288,7 +288,7 @@ export class ZTooltipDeprecated {
       "mutable": true,
       "complexType": {
         "original": "PopoverPositions",
-        "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
+        "resolved": "PopoverPositions.auto | PopoverPositions.bottom | PopoverPositions.bottom_left | PopoverPositions.bottom_right | PopoverPositions.left | PopoverPositions.left_bottom | PopoverPositions.left_top | PopoverPositions.right | PopoverPositions.right_bottom | PopoverPositions.right_top | PopoverPositions.top | PopoverPositions.top_left | PopoverPositions.top_right",
         "references": {
           "PopoverPositions": {
             "location": "import",
@@ -304,7 +304,7 @@ export class ZTooltipDeprecated {
       },
       "attribute": "type",
       "reflect": false,
-      "defaultValue": "PopoverPositions.AUTO"
+      "defaultValue": "PopoverPositions.auto"
     },
     "open": {
       "type": "boolean",

package/dist/collection/snowflakes/myz/card/z-myz-card-info/index.js

@@ -90,7 +90,7 @@ export class ZMyzCardInfo {
     if (!this.cardData)
       return;
     const { title, year, author, description } = this.cardData;
-    return (h("z-popover", { position: PopoverPositions.RIGHT, onClick: () => (this.tooltip = false) }, `${title} ${year} ${author} ${description}`));
+    return (h("z-popover", { position: PopoverPositions.right, onClick: () => (this.tooltip = false) }, `${title} ${year} ${author} ${description}`));
   }
   setExpirationLicenseMessage(type) {
     if ((type === "online" && this.cardData.onlineLicense.expired) ||

package/dist/esm/{index-c1ce8cab.js → index-e3640537.js}

@@ -59,20 +59,53 @@ var InputStatusEnum;
 })(InputStatusEnum || (InputStatusEnum = {}));
 var PopoverPositions;
 (function (PopoverPositions) {
-  PopoverPositions["AUTO"] = "auto";
-  PopoverPositions["TOP"] = "top";
-  PopoverPositions["RIGHT"] = "right";
-  PopoverPositions["BOTTOM"] = "bottom";
-  PopoverPositions["LEFT"] = "left";
-  PopoverPositions["TOP_RIGHT"] = "top_right";
-  PopoverPositions["TOP_LEFT"] = "top_left";
-  PopoverPositions["BOTTOM_RIGHT"] = "bottom_right";
-  PopoverPositions["BOTTOM_LEFT"] = "bottom_left";
-  PopoverPositions["RIGHT_TOP"] = "right_top";
-  PopoverPositions["RIGHT_BOTTOM"] = "right_bottom";
-  PopoverPositions["LEFT_TOP"] = "left_top";
-  PopoverPositions["LEFT_BOTTOM"] = "left_bottom";
+  PopoverPositions["auto"] = "auto";
+  PopoverPositions["top"] = "top";
+  PopoverPositions["right"] = "right";
+  PopoverPositions["bottom"] = "bottom";
+  PopoverPositions["left"] = "left";
+  PopoverPositions["top_right"] = "top_right";
+  PopoverPositions["top_left"] = "top_left";
+  PopoverPositions["bottom_right"] = "bottom_right";
+  PopoverPositions["bottom_left"] = "bottom_left";
+  PopoverPositions["right_top"] = "right_top";
+  PopoverPositions["right_bottom"] = "right_bottom";
+  PopoverPositions["left_top"] = "left_top";
+  PopoverPositions["left_bottom"] = "left_bottom";
 })(PopoverPositions || (PopoverPositions = {}));
+var PopoverPosition;
+(function (PopoverPosition) {
+  PopoverPosition["after-down"] = "after-down";
+  PopoverPosition["after-center"] = "after-center";
+  PopoverPosition["after-up"] = "after-up";
+  PopoverPosition["below-right"] = "below-right";
+  PopoverPosition["below-center"] = "below-center";
+  PopoverPosition["below-left"] = "below-left";
+  PopoverPosition["before-down"] = "before-down";
+  PopoverPosition["before-center"] = "before-center";
+  PopoverPosition["before-up"] = "before-up";
+  PopoverPosition["above-right"] = "above-right";
+  PopoverPosition["above-center"] = "above-center";
+  PopoverPosition["above-left"] = "above-left";
+})(PopoverPosition || (PopoverPosition = {}));
+var PopoverBorderRadius;
+(function (PopoverBorderRadius) {
+  PopoverBorderRadius["none"] = "none";
+  PopoverBorderRadius["small"] = "small";
+  PopoverBorderRadius["medium"] = "medium";
+})(PopoverBorderRadius || (PopoverBorderRadius = {}));
+var PopoverShadow;
+(function (PopoverShadow) {
+  PopoverShadow["shadow-1"] = "shadow-1";
+  PopoverShadow["shadow-2"] = "shadow-2";
+  PopoverShadow["shadow-3"] = "shadow-3";
+  PopoverShadow["shadow-4"] = "shadow-4";
+  PopoverShadow["shadow-6"] = "shadow-6";
+  PopoverShadow["shadow-8"] = "shadow-8";
+  PopoverShadow["shadow-12"] = "shadow-12";
+  PopoverShadow["shadow-16"] = "shadow-16";
+  PopoverShadow["shadow-24"] = "shadow-24";
+})(PopoverShadow || (PopoverShadow = {}));
 var KeyboardKeyCodeEnum;
 (function (KeyboardKeyCodeEnum) {
   KeyboardKeyCodeEnum[KeyboardKeyCodeEnum["TAB"] = 9] = "TAB";
@@ -282,5 +315,12 @@ var StatusTagStatus;
   StatusTagStatus["neutral"] = "neutral";
   StatusTagStatus["default"] = "default";
 })(StatusTagStatus || (StatusTagStatus = {}));
+var InfoRevealPosition;
+(function (InfoRevealPosition) {
+  InfoRevealPosition["top_right"] = "top_right";
+  InfoRevealPosition["top_left"] = "top_left";
+  InfoRevealPosition["bottom_right"] = "bottom_right";
+  InfoRevealPosition["bottom_left"] = "bottom_left";
+})(InfoRevealPosition || (InfoRevealPosition = {}));
 
-export { AvatarSize as A, ButtonTypeEnum as B, CardVariants as C, DeviceEnum as D, ExpandableListButtonAlign as E, InputTypeEnum as I, KeyboardCodeEnum as K, LabelPositions as L, NavigationTabsOrientations as N, OffCanvasVariantsEnum as O, PopoverPositions as P, StatusTagStatus as S, ThemeVariant as T, ZDatePickerMode as Z, DividerOrientation as a, DividerSize as b, ZDatePickerPosition as c, ZDatePickerModeValues as d, ZAriaAlertMode as e, ButtonVariantEnum as f, ButtonSizeEnum as g, KeyboardKeyCodeEnum as h, ZChipType as i, ZFileUploadTypeEnum as j, PocketStatusEnum as k, InputStatusEnum as l, AlertTypesEnum as m, LicenseTypeEnum as n, NavigationTabsSizes as o, TransitionDirectionEnum as p, KeyboardKeys as q, ZSectionTitleDividerPositions as r, ZTableRowExpandedType as s, ToastNotificationTransitionsEnum as t, ToastNotificationPositionsEnum as u, ListDividerType as v, ListSize as w, Size as x, SortDirectionEnum as y, ExpandableListStyle as z };
+export { AvatarSize as A, ButtonTypeEnum as B, CardVariants as C, DeviceEnum as D, ListSize as E, Size as F, SortDirectionEnum as G, ExpandableListButtonAlign as H, InputTypeEnum as I, ExpandableListStyle as J, KeyboardCodeEnum as K, LabelPositions as L, NavigationTabsOrientations as N, OffCanvasVariantsEnum as O, PopoverPositions as P, StatusTagStatus as S, ThemeVariant as T, ZDatePickerMode as Z, DividerOrientation as a, DividerSize as b, ZDatePickerPosition as c, ZDatePickerModeValues as d, ZAriaAlertMode as e, ButtonVariantEnum as f, ButtonSizeEnum as g, KeyboardKeyCodeEnum as h, ZChipType as i, ZFileUploadTypeEnum as j, InfoRevealPosition as k, PocketStatusEnum as l, InputStatusEnum as m, AlertTypesEnum as n, LicenseTypeEnum as o, NavigationTabsSizes as p, TransitionDirectionEnum as q, PopoverPosition as r, PopoverBorderRadius as s, PopoverShadow as t, KeyboardKeys as u, ZSectionTitleDividerPositions as v, ZTableRowExpandedType as w, ToastNotificationTransitionsEnum as x, ToastNotificationPositionsEnum as y, ListDividerType as z };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { c as colorFromId } from './utils-99c70c57.js';
-import './index-c1ce8cab.js';
+import { c as colorFromId } from './utils-f3d44cb3.js';
+import './index-e3640537.js';
 import './breakpoints-c386984e.js';
 
 const Utils = {