@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { Device, KeyboardCode, PopoverPosition } from "../../beans";
 import { containsElement, findContainingBlockAncestor, getDevice, getParentElement, isElementVisibleInContainer, } from "../../utils/utils";
 /**
@@ -8,23 +8,33 @@ import { containsElement, findContainingBlockAncestor, getDevice, getParentEleme
  *
  * Notes:
  * - If positioning has an odd behavior, consider manually adjusting the size of the slotted elements (using `width`, `height`, `max-width`, `max-height`, etc...) when its content is "fluid" (like text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think the popover doesn't fits).
- *
- * @cssprop --z-popover-theme--surface - background color of the popover.
- * @cssprop --z-popover-theme--text - foreground color of the popover.
- * @cssprop --z-popover-padding - padding of the popover.
- * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.
  */
 export class ZPopover {
     constructor() {
-        /** space tolerance for space calculations */
-        this.spaceTolerance = 3;
+        /**
+         * The preferred position to render the popover.
+         * The popover will automatically search another position if not enough space is available for the preferred position.
+         * If the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise.
+         */
         this.position = PopoverPosition.TOP;
+        /**
+         * The initial open state of the popover.
+         * Internal changes of this prop are emitted through the `openChange` event.
+         * Make sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values.
+         */
         this.open = false;
-        this.bindTo = undefined;
+        /** Whether to show popover's arrow. */
         this.showArrow = false;
+        /** Whether to center the popup on the main side (according to "position"). */
         this.center = false;
+        /**
+         * Whether the popover can be closed by clicking outside of it or pressing the escape key.
+         * Otherwise, it will be closed only programmatically (by setting `open` to `false`).
+         * Default: `true`.
+         */
         this.closable = true;
-        this.currentPosition = undefined;
+        /** space tolerance for space calculations */
+        this.spaceTolerance = 3;
     }
     closePopoverWithKeyboard(e) {
         if (this.closable && e.key === KeyboardCode.ESC) {
@@ -497,7 +507,7 @@ export class ZPopover {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: '83d24ed11a01f0ff29486a6c2e3a3716960d44a1', "current-position": this.currentPosition }, h("slot", { key: '7c048c564bc76ee6dda7df4dfb55eb80c5b5ebae' })));
+        return (h(Host, { key: '52bff483a21ec4b2911ef16ae19fe4a860896b4a', "current-position": this.currentPosition }, h("slot", { key: '88e89856e0083f540df0fd0d7155c55c16c1932b' })));
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -523,7 +533,8 @@ export class ZPopover {
                         "PopoverPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition"
+                            "id": "src/beans/index.tsx::PopoverPosition",
+                            "referenceLocation": "PopoverPosition"
                         }
                     }
                 },
@@ -533,8 +544,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "The preferred position to render the popover.\nThe popover will automatically search another position if not enough space is available for the preferred position.\nIf the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise."
                 },
-                "attribute": "position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "position",
                 "defaultValue": "PopoverPosition.TOP"
             },
             "open": {
@@ -551,8 +564,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "The initial open state of the popover.\nInternal changes of this prop are emitted through the `openChange` event.\nMake sure to listen to that event if you need the updated state of the popover from the outside, to avoid inconsistent values."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "bindTo": {
@@ -574,8 +589,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "The selector or the element bound with the popover.\nIf string css selector is provided make sure to use a valid selector."
                 },
-                "attribute": "bind-to",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bind-to"
             },
             "showArrow": {
                 "type": "boolean",
@@ -591,8 +608,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "Whether to show popover's arrow."
                 },
-                "attribute": "show-arrow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "show-arrow",
                 "defaultValue": "false"
             },
             "center": {
@@ -609,8 +628,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "Whether to center the popup on the main side (according to \"position\")."
                 },
-                "attribute": "center",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "center",
                 "defaultValue": "false"
             },
             "closable": {
@@ -627,8 +648,10 @@ export class ZPopover {
                     "tags": [],
                     "text": "Whether the popover can be closed by clicking outside of it or pressing the escape key.\nOtherwise, it will be closed only programmatically (by setting `open` to `false`).\nDefault: `true`."
                 },
-                "attribute": "closable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "closable",
                 "defaultValue": "true"
             }
         };
@@ -656,7 +679,8 @@ export class ZPopover {
                         "PopoverPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition"
+                            "id": "src/beans/index.tsx::PopoverPosition",
+                            "referenceLocation": "PopoverPosition"
                         }
                     }
                 }
@@ -721,4 +745,3 @@ ZPopover.positionOrder = [
     PopoverPosition.LEFT_TOP,
     PopoverPosition.LEFT_BOTTOM,
 ];
-//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,10 @@
 :host {
+  /**
+   * @prop --z-popover-theme--surface: background color of the popover.
+   * @prop --z-popover-theme--text: foreground color of the popover.
+   * @prop --z-popover-padding: padding of the popover.
+   * @prop --z-popover-shadow-filter: drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.
+   */
   --z-popover-theme--surface: ;
   --z-popover-theme--text: ;
   --z-popover-padding: ;

package/dist/collection/components/z-result-card/index.js

@@ -5,6 +5,10 @@ import { Host, h } from "@stencil/core";
  */
 export class ZResultCard {
     constructor() {
+        /** Whether to show a stack of covers to represent multiple books. */
+        this.hasMultipleCovers = false;
+        /** Enables the "info" variant of the card. */
+        this.isInfoCard = false;
         this.resizeHandler = () => {
             this.setTooltipTitle(this.authorsRef);
             this.setTooltipTitle(this.titleRef);
@@ -23,14 +27,6 @@ export class ZResultCard {
         this.renderInfoCard = () => {
             return (h(Host, { class: "info-card" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link" })), h("div", { class: "info-container" }, this.renderTitle(), this.renderSubtitle())));
         };
-        this.cardTitle = undefined;
-        this.cardSubtitle = undefined;
-        this.authors = undefined;
-        this.cover = undefined;
-        this.fallbackCover = undefined;
-        this.hasMultipleCovers = false;
-        this.isInfoCard = false;
-        this.titleHtmlTag = undefined;
     }
     setTooltipTitle(el) {
         if (!el) {
@@ -100,8 +96,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "The title of the card."
                 },
-                "attribute": "card-title",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-title"
             },
             "cardSubtitle": {
                 "type": "string",
@@ -117,8 +115,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "The subtitle of the card."
                 },
-                "attribute": "card-subtitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-subtitle"
             },
             "authors": {
                 "type": "string",
@@ -134,8 +134,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "The authors of the opera."
                 },
-                "attribute": "authors",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "authors"
             },
             "cover": {
                 "type": "string",
@@ -151,8 +153,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "The URL of the cover image of the opera."
                 },
-                "attribute": "cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover"
             },
             "fallbackCover": {
                 "type": "string",
@@ -168,8 +172,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "[optional] Fallback cover URL."
                 },
-                "attribute": "fallback-cover",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback-cover"
             },
             "hasMultipleCovers": {
                 "type": "boolean",
@@ -185,8 +191,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "Whether to show a stack of covers to represent multiple books."
                 },
-                "attribute": "has-multiple-covers",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "has-multiple-covers",
                 "defaultValue": "false"
             },
             "isInfoCard": {
@@ -203,8 +211,10 @@ export class ZResultCard {
                     "tags": [],
                     "text": "Enables the \"info\" variant of the card."
                 },
-                "attribute": "is-info-card",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "is-info-card",
                 "defaultValue": "false"
             },
             "titleHtmlTag": {
@@ -221,11 +231,12 @@ export class ZResultCard {
                     "tags": [],
                     "text": "[optional] Set a specific heading level as html tag for the title."
                 },
-                "attribute": "title-html-tag",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-html-tag"
             }
         };
     }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-result-card/styles.css

@@ -7,7 +7,7 @@
   display: flex;
   overflow: hidden;
   min-width: 0;
-  height: 11.125rem;
+  min-height: 11.125rem;
   padding: var(--space-unit);
   border: var(--border-size-medium) solid var(--color-surface02);
   background-color: var(--color-surface01);
@@ -57,6 +57,7 @@ z-book-cover {
 .card-subtitle {
   overflow: hidden;
   color: var(--color-default-text);
+  line-height: 1.4;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -131,10 +132,12 @@ z-book-cover {
 
 @media (max-width: 767px) {
   .card-title {
-    display: block;
+    display: -webkit-box;
     overflow: hidden;
-    line-height: normal;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    line-height: 1.4;
+    word-break: break-word;
   }
 }