@zanichelli/albe-web-components 4.1.0 → 4.2.0

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

@@ -1,236 +1,147 @@
 :host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
+  --z-popover-theme--surface: var(--color-surface01);
+  --z-popover-theme--text: var(--color-text01);
+  --z-popover-padding: 0;
+  --z-popover-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));
 
   position: relative;
-  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 {
+  display: none;
+  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;
   border-radius: var(--border-radius-small);
+  background: var(--z-popover-theme--surface);
+  filter: var(--z-popover-shadow-filter);
 }
 
-.popover-content-container.border-radius-medium {
-  border-radius: var(--border-radius);
-}
-
-/*
-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);
+:host([open][current-position]),
+:host([open="true"][current-position]) {
+  display: flex;
 }
 
-.popover-content-container.shadow-12 {
-  box-shadow: var(--shadow-12);
-}
-
-.popover-content-container.shadow-16 {
-  box-shadow: var(--shadow-16);
-}
-
-.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));
+:host([center][current-position="top"]),
+:host([center][current-position="bottom"]) {
+  transform: translateX(-50%);
 }
 
-.popover-content-container.after-center {
-  top: 50%;
-  left: calc(100% + var(--space-unit));
+:host([center][current-position="right"]),
+:host([center][current-position="left"]) {
   transform: translateY(-50%);
 }
 
-.popover-content-container.after-up {
-  bottom: 0;
-  left: calc(100% + var(--space-unit));
+:host([current-position^="top"]) {
+  margin: 0 0 var(--space-unit);
 }
 
-.popover-content-container.below-right {
-  left: 0;
-  top: calc(100% + var(--space-unit));
+:host([current-position^="bottom"]) {
+  margin: var(--space-unit) 0 0;
 }
 
-.popover-content-container.below-center {
-  left: 50%;
-  top: calc(100% + var(--space-unit));
-  transform: translateX(-50%);
+:host([current-position^="left"]) {
+  margin: 0 var(--space-unit) 0 0;
 }
 
-.popover-content-container.below-left {
-  right: 0;
-  top: calc(100% + var(--space-unit));
+:host([current-position^="right"]) {
+  margin: 0 0 0 var(--space-unit);
 }
 
-.popover-content-container.before-down {
-  top: 0;
-  right: calc(100% + var(--space-unit));
-}
+/* Arrow style */
 
-.popover-content-container.before-center {
-  top: 50%;
-  right: calc(100% + var(--space-unit));
-  transform: translateY(-50%);
-}
+:host([current-position])::before {
+  --arrow-size: 6px;
+  --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));
+  --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));
+  --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));
 
-.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));
+  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.above-center {
-  left: 50%;
-  bottom: calc(100% + var(--space-unit));
-  transform: translateX(-50%);
+:host([show-arrow="false"])::before,
+:host(:not([show-arrow]))::before {
+  display: none;
 }
 
-.popover-content-container.above-left {
-  right: 0;
-  bottom: calc(100% + var(--space-unit));
+:host([current-position^="top"])::before {
+  top: var(--arrow-center-y-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^="bottom"])::before {
+  bottom: var(--arrow-center-y-offset);
 }
 
-.popover-content-container.after-down:before {
-  top: 12px;
-  left: -4px;
-  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+:host([current-position="top"])::before,
+:host([current-position="bottom"])::before {
+  right: var(--arrow-edge-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="right"])::before,
+:host([current-position="left"])::before {
+  bottom: var(--arrow-edge-offset);
 }
 
-.popover-content-container.after-up:before {
-  bottom: 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.below-right:before {
-  left: 12px;
-  top: -4px;
-  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+:host([current-position="left"])::before {
+  left: var(--arrow-center-y-offset);
 }
 
-.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_right"])::before,
+:host([current-position="bottom_right"])::before {
+  right: var(--arrow-edge-offset);
 }
 
-.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"])::before,
+:host([current-position="bottom_left"])::before {
+  left: var(--arrow-edge-offset);
 }
 
-.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 {
+  top: var(--arrow-edge-offset);
 }
 
-.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 {
+  bottom: var(--arrow-edge-offset);
 }
 
-.popover-content-container.above-center:before {
-  left: calc(50% - 4px);
-  bottom: -4px;
-  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+:host([center][current-position="top"])::before,
+:host([center][current-position="bottom"])::before {
+  right: auto;
+  left: var(--arrow-center-x-offset);
 }
 
-.popover-content-container.above-left:before {
-  right: 12px;
-  bottom: -4px;
-  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+:host([center][current-position="right"])::before,
+:host([center][current-position="left"])::before {
+  top: var(--arrow-center-x-offset);
+  bottom: auto;
 }
 
-/** Show/Hide arrow */
-.popover-content-container.show-arrow:before {
-  display: block;
+::slotted(*) {
+  flex: 1 auto;
+  overflow: auto;
 }

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

@@ -1,6 +1,6 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Prop, } from "@stencil/core";
 import classNames from "classnames";
-import { ButtonSizeEnum, ButtonVariantEnum, PopoverPosition, Size, SortDirectionEnum, } from "../../../beans";
+import { ButtonSizeEnum, ButtonVariantEnum, PopoverPositions, Size, SortDirectionEnum, } from "../../../beans";
 import { getElementTree } from "../../../utils/utils";
 export class ZTableHeader {
   constructor() {
@@ -9,7 +9,6 @@ export class ZTableHeader {
     /** [Optional] Default sort order */
     this.defaultSortDirection = SortDirectionEnum.asc;
     this.sortDirection = SortDirectionEnum.none;
-    this.isMenuOpened = false;
     this.emitOnSort = this.emitOnSort.bind(this);
   }
   emitOnSort() {
@@ -37,13 +36,13 @@ export class ZTableHeader {
     this.emitOnSort();
   }
   handleMenuClick() {
-    this.isMenuOpened = !this.isMenuOpened;
+    this.popover.open = !this.popover.open;
   }
   handleOutsideClick(e) {
     const tree = getElementTree(e.target);
     const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover");
-    if (!parent) {
-      this.isMenuOpened = false;
+    if (!parent && this.popover) {
+      this.popover.open = false;
     }
   }
   handleClickHeaders(e) {
@@ -65,17 +64,15 @@ export class ZTableHeader {
     return (h(Host, { class: classNames({
         sortable: this.sortable,
       }), onClick: () => this.handleSort() },
-      h("div", { class: classNames("container") },
+      h("div", { class: 'container' },
         h("slot", null),
         this.sortable && this.sortDirection !== SortDirectionEnum.none && (h("z-icon", { name: this.sortDirection === SortDirectionEnum.asc
             ? "arrow-up"
             : "arrow-down", class: "arrow" }))),
-      this.showButton && (h("div", { class: classNames("popover-container", {
-          visible: this.isMenuOpened,
-        }) },
-        h("z-popover", { position: PopoverPosition["below-center"], "background-color": "gray200" },
-          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], slot: "trigger", onClick: () => this.handleMenuClick() }),
-          h("div", { slot: "popover" },
+      this.showButton && (h("div", { class: 'popover-container' },
+        h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenuClick() }),
+        h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPositions.BOTTOM, center: true, bindTo: this.triggerButton },
+          h("div", null,
             h("slot", { name: "contextual-menu" })))))));
   }
   static get is() { return "z-table-header"; }
@@ -208,9 +205,6 @@ export class ZTableHeader {
       "defaultValue": "SortDirectionEnum.none"
     }
   }; }
-  static get states() { return {
-    "isMenuOpened": {}
-  }; }
   static get events() { return [{
       "method": "sort",
       "name": "sort",

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

@@ -1,11 +1,11 @@
 :host {
+  position: relative;
   display: table-cell;
   background-color: var(--gray50);
   border-bottom: var(--border-size-medium) solid var(--gray200);
   font-family: var(--dashboard-font);
   font-weight: var(--font-sb);
   text-align: start;
-  position: relative;
 }
 
 .container {
@@ -54,6 +54,12 @@ Contextual menu
   display: none;
 }
 
+.popover-container z-popover {
+  --z-popover-theme--surface: var(--gray200);
+  position: relative;
+  z-index: 1;
+}
+
 .popover-container.visible {
   display: block;
 }