@zanichelli/albe-web-components 19.3.0-rc1 → 19.3.0

package/dist/cjs/utils-Ctc6JP2n.js

@@ -1,259 +0,0 @@
-'use strict';
-
-var index = require('./index-wGaSHN1_.js');
-var breakpoints = require('./breakpoints-B7vFm-3T.js');
-
-/**
- * Return boolean value for passed value if a boolean corresponding value is found
- * Return passed value otherwise
- */
-function boolean(value) {
-    switch (value) {
-        case true:
-        case "true":
-        case 1:
-        case "1":
-        case "on":
-        case "yes":
-            return true;
-        case false:
-        case "false":
-        case 0:
-        case "0":
-        case "off":
-        case "no":
-            return false;
-        default:
-            return value;
-    }
-}
-function randomId() {
-    return Math.random().toString(36).replace("0.", "");
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleKeyboardSubmit(ev, callback, ...args) {
-    if (ev.code === index.KeyboardCode.ENTER || ev.code === index.KeyboardCode.SPACE) {
-        ev.preventDefault();
-        callback(...args);
-    }
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleEnterKeydSubmit(ev, callback, ...args) {
-    if (ev.code === index.KeyboardCode.ENTER) {
-        ev.preventDefault();
-        callback(...args);
-    }
-}
-function getClickedElement(elem = null) {
-    if (!elem) {
-        elem = document.activeElement;
-    }
-    if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {
-        elem = elem.shadowRoot.activeElement;
-        return getClickedElement(elem);
-    }
-    return elem;
-}
-function getElementTree(elem, tree = []) {
-    tree.push(elem);
-    if (elem.parentElement) {
-        elem = elem.parentElement;
-        return getElementTree(elem, tree);
-    }
-    else if (elem.parentNode && elem.parentNode.host) {
-        elem = elem.parentNode.host;
-        return getElementTree(elem, tree);
-    }
-    return tree;
-}
-/**
- * Get the current device type based on the window width.
- * @returns {Device} - The current device type
- */
-function getDevice() {
-    switch (true) {
-        case window.innerWidth <= breakpoints.Breakpoints.MOBILE:
-            return index.Device.MOBILE;
-        case window.innerWidth <= breakpoints.Breakpoints.TABLET:
-            return index.Device.TABLET;
-        case window.innerWidth <= breakpoints.Breakpoints.DESKTOP:
-            return index.Device.DESKTOP;
-        default:
-            return index.Device.DESKTOP_WIDE;
-    }
-}
-function convertJson(data) {
-    try {
-        return JSON.parse(data);
-    }
-    catch (_a) {
-        return false;
-    }
-}
-function colorFromId(id) {
-    const prefix = "avatar-C"; // prefix for color vars name
-    const colorsCount = 19; // available colors
-    const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);
-    let color = Math.ceil(colorsCount * (seed % 1));
-    // if result of mc is 0
-    // es.: 3895229
-    if (color === 0) {
-        color = 1;
-    }
-    return `${prefix}${color.toString().padStart(2, "0")}`;
-}
-/**
- * Check if an element contains another element, checking both light and shadow DOM recursively.
- * This function also checks slot assignments, so it correctly handles nested slots across components.
- * @param ancestor Ancestor element
- * @param descendant Descendant element
- */
-function containsElement(ancestor, descendant) {
-    var _a;
-    if (ancestor.contains(descendant) || ((_a = ancestor.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(descendant))) {
-        return true;
-    }
-    const checkRecursive = (node) => {
-        if (node === descendant) {
-            return true;
-        }
-        const shadowRoot = node.shadowRoot;
-        if (!shadowRoot) {
-            // Check light DOM children only
-            return Array.from(node.childNodes).some(checkRecursive);
-        }
-        if (shadowRoot.contains(descendant)) {
-            return true;
-        }
-        // Check slot assigned nodes
-        const hasDescendantInAssignedNodes = Array.from(shadowRoot.querySelectorAll("slot")).some((slot) => slot
-            .assignedNodes({ flatten: true })
-            .some((assigned) => { var _a, _b; return ((_b = (_a = assigned).contains) === null || _b === void 0 ? void 0 : _b.call(_a, descendant)) || checkRecursive(assigned); }));
-        if (hasDescendantInAssignedNodes) {
-            return true;
-        }
-        // Check shadow and light DOM children
-        return Array.from(shadowRoot.children).some(checkRecursive) || Array.from(node.childNodes).some(checkRecursive);
-    };
-    return checkRecursive(ancestor);
-}
-/** Get the parent of passed element, accounting for shadow DOM.
- * @param element The element whose parent is to be found.
- */
-function getParentElement(element) {
-    // If the element is slotted, the direct rendered parent is the target slot in shadow DOM.
-    if (element.assignedSlot) {
-        return element.assignedSlot;
-    }
-    // If the element is in a shadow root, the parent is the shadow host.
-    if (element.parentNode instanceof ShadowRoot) {
-        return element.parentNode.host;
-    }
-    // Otherwise fall back to standard light DOM parent.
-    return element.parentElement;
-}
-/**
- * Check if the `element` is visible within the `container` or in the viewport.
- * @param element The element to check.
- * @param container The container to check against, which must be the nearest scrollable ancestor.
- */
-function isElementVisibleInContainer(element, container) {
-    const elemRect = element.getBoundingClientRect();
-    const documentWidth = element.ownerDocument.documentElement.clientWidth;
-    const documentHeight = element.ownerDocument.documentElement.clientHeight;
-    // Check if element is visible in viewport
-    const isVisibleInViewport = elemRect.bottom > 0 && elemRect.top < documentHeight && elemRect.right > 0 && elemRect.left < documentWidth;
-    // If container is the document element, only check viewport visibility
-    if (container === element.ownerDocument.documentElement || container === element.ownerDocument.body) {
-        return isVisibleInViewport;
-    }
-    // For other containers, check both container and viewport visibility
-    const containerRect = container.getBoundingClientRect();
-    const isVisibleInContainer = elemRect.bottom > containerRect.top &&
-        elemRect.top < containerRect.bottom &&
-        elemRect.right > containerRect.left &&
-        elemRect.left < containerRect.right;
-    return isVisibleInContainer && isVisibleInViewport;
-}
-/**
- * Find the nearest containing block ancestor of an element.
- * The containing block is determined based on the element's `position` value:
- * - `static`, `sticky` or `relative`: nearest block container or root
- * - `absolute`: nearest ancestor with `position` != `static`
- * - `fixed`: nearest ancestor with properties that create a containing block (`transform`, `filter`, `will-change`, `backdrop-filter`, `perspective`, etc.).
- * An ancestor with these properties will create a containing block for fixed positioned elements, making them behave like absolute positioned elements relative to that ancestor.
- *
- * @link https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Containing_block#identifying_the_containing_block
- * @param element The element for which to find the containing block
- * @returns The containing block element if any, or the `documentElement`
- */
-function findContainingBlockAncestor(element) {
-    let parent = getParentElement(element);
-    const elementPosition = window.getComputedStyle(element).position;
-    while (parent && parent !== element.ownerDocument.documentElement) {
-        const parentStyle = window.getComputedStyle(parent);
-        switch (elementPosition) {
-            case "fixed": {
-                const affectingProperties = [
-                    "filter",
-                    "transform",
-                    "translate",
-                    "perspective",
-                    "scale",
-                    "rotate",
-                    "backdrop-filter",
-                ];
-                if (affectingProperties.some((property) => parentStyle.getPropertyValue(property) !== "none") ||
-                    affectingProperties.some((property) => parentStyle.getPropertyValue("will-change").includes(property))) {
-                    return parent;
-                }
-                break;
-            }
-            case "absolute":
-                if (parentStyle.position !== "static") {
-                    return parent;
-                }
-                break;
-            // Handle position: static, relative, sticky (they all look for the nearest block container or root)
-            case "relative":
-            case "sticky":
-            case "static": {
-                const display = window.getComputedStyle(parent).display;
-                // Block containers: block, flex, grid, table, flow-root
-                if (display === "block" ||
-                    display === "flex" ||
-                    display === "grid" ||
-                    display === "table" ||
-                    display === "flow-root" ||
-                    display === "inline-block" ||
-                    display === "inline-flex" ||
-                    display === "inline-grid") {
-                    return parent;
-                }
-                break;
-            }
-        }
-        parent = getParentElement(parent);
-    }
-    return element.ownerDocument.documentElement;
-}
-/** Convert HTML to plain text */
-const getPlainText = (html) => {
-    const doc = new DOMParser().parseFromString(html, "text/html");
-    return doc.body.textContent || "";
-};
-
-exports.boolean = boolean;
-exports.colorFromId = colorFromId;
-exports.containsElement = containsElement;
-exports.convertJson = convertJson;
-exports.findContainingBlockAncestor = findContainingBlockAncestor;
-exports.getClickedElement = getClickedElement;
-exports.getDevice = getDevice;
-exports.getElementTree = getElementTree;
-exports.getParentElement = getParentElement;
-exports.getPlainText = getPlainText;
-exports.handleEnterKeydSubmit = handleEnterKeydSubmit;
-exports.handleKeyboardSubmit = handleKeyboardSubmit;
-exports.isElementVisibleInContainer = isElementVisibleInContainer;
-exports.randomId = randomId;

package/dist/collection/__mocks__/fileMock.js

@@ -1 +0,0 @@
-export default "test-file-stub";

package/dist/collection/components/book-card/z-book-card/index.stories.js

@@ -1,175 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { BookCardVariant } from "../../../beans";
-import "../../z-button/index";
-import "../../z-icon/index";
-import "../../z-tag/index";
-import "../z-book-card-app/index";
-import "./index";
-const StoryMeta = {
-    title: "ZBookCard/ZBookCard",
-    component: "z-book-card",
-    argTypes: {
-        variant: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(BookCardVariant),
-        },
-    },
-    args: {
-        "variant": BookCardVariant.LANDSCAPE,
-        "cover": "https://staticmy.zanichelli.it/copertine/dashboard/m40002.9788808999825.jpg",
-        "operaTitle": "Matematica.azzurro",
-        "volumeTitle": "Volume 3 con Tutor",
-        "authors": "Massimo Bergamini, Anna Trifone, Graziella Barozzi",
-        "isbn": "9788808930552",
-        "isbnLabel": "(ed. cartacea)",
-        "year": "2025",
-        "ebookUrl": "https://www.zanichelli.it/ricerca",
-        "fallbackCover": "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
-        "titleHtmlTag": undefined,
-        "hasMultipleCovers": false,
-        "linkTarget": "_blank",
-        "--z-book-card-portrait-cover-height": "378px",
-        "--z-book-card-title-lines": "2",
-        "--z-book-card-title-word-break": "initial",
-        "--z-book-card-subtitle-lines": "1",
-        "--z-book-card-subtitle-word-break": "break-all",
-        "--z-book-card-authors-lines": "1",
-        "--z-book-card-authors-word-break": "break-all",
-    },
-};
-export default StoryMeta;
-export const Card = {
-    render: (args) => html `<z-book-card
-      .variant=${args.variant}
-      cover=${args.cover}
-      authors=${args.authors}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      year=${args.year}
-      ebook-url=${args.ebookUrl}
-      fallback-cover=${args.fallbackCover}
-      title-html-tag=${args.titleHtmlTag}
-      .hasMultipleCovers=${args.hasMultipleCovers}
-      link-target=${args.linkTarget}
-      style=${styleMap({
-        "--z-book-card-portrait-cover-height": args["--z-book-card-portrait-cover-height"],
-        "--z-book-card-title-lines": args["--z-book-card-title-lines"],
-        "--z-book-card-title-word-break": args["--z-book-card-title-word-break"],
-        "--z-book-card-subtitle-lines": args["--z-book-card-subtitle-lines"],
-        "--z-book-card-subtitle-word-break": args["--z-book-card-subtitle-word-break"],
-        "--z-book-card-authors-lines": args["--z-book-card-authors-lines"],
-        "--z-book-card-authors-word-break": args["--z-book-card-authors-word-break"],
-    })}
-    ></z-book-card>`,
-};
-export const WithSlottedContent = {
-    render: (args) => html `<z-book-card
-      variant=${args.variant}
-      .cover=${args.cover}
-      authors=${args.authors}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      year=${args.year}
-      ebook-url=${args.ebookUrl}
-      fallback-cover=${args.fallbackCover}
-      title-html-tag=${args.titleHtmlTag}
-      .hasMultipleCovers=${args.hasMultipleCovers}
-      link-target=${args.linkTarget}
-      style=${styleMap({
-        "--z-book-card-portrait-cover-height": args["--z-book-card-portrait-cover-height"],
-        "--z-book-card-title-lines": args["--z-book-card-title-lines"],
-        "--z-book-card-title-word-break": args["--z-book-card-title-word-break"],
-        "--z-book-card-subtitle-lines": args["--z-book-card-subtitle-lines"],
-        "--z-book-card-subtitle-word-break": args["--z-book-card-subtitle-word-break"],
-        "--z-book-card-authors-lines": args["--z-book-card-authors-lines"],
-        "--z-book-card-authors-word-break": args["--z-book-card-authors-word-break"],
-    })}
-    >
-      <div slot="cta">
-        <z-icon
-          style="cursor: pointer; fill: var(--blue500);"
-          name="star-full"
-          width="20"
-          height="20"
-        ></z-icon>
-      </div>
-
-      <div slot="ebook">
-        <z-button
-          variant="primary"
-          size="x-small"
-          >custom ebook button</z-button
-        >
-      </div>
-
-      <div slot="tags">
-        <z-tag style="--z-tag-bg: var(--gray500);">EDIZIONE DIGITALE INSEGNANTE</z-tag>
-        <z-tag style="--z-tag-bg: var(--blue50); --z-tag-text-color: var(--gray950);">BES</z-tag>
-      </div>
-
-      <div slot="data">
-        <a
-          href="https://www.zanichelli.it"
-          class="catalog-link z-link z-link-blue z-link-icon body-4-sb"
-          >Scheda catalogo
-          <z-icon
-            name="arrow-quad-north-east"
-            width="14"
-            height="14"
-          ></z-icon>
-        </a>
-        <div
-          class="body-5-sb"
-          style="padding: calc(var(--space-unit) / 2) var(--space-unit); background-color: var(--green100); border-radius: 100px;"
-        >
-          ADOTTATO
-        </div>
-      </div>
-
-      <div
-        slot="apps"
-        style="display: flex; flex-wrap: wrap;"
-      >
-        <z-book-card-app
-          icon="https://placehold.co/24"
-          name="Tutor di matematica matematica"
-          info="test test"
-          link="http://localhost"
-        ></z-book-card-app>
-        <z-book-card-app
-          icon="https://placehold.co/24"
-          name="Esercizi"
-          info="test test"
-          link="http://localhost"
-        ></z-book-card-app>
-      </div>
-
-      <div
-        slot="coverOverlay"
-        class="body-4-sb"
-      >
-        ANTEPRIMA DEL LIBRO SENZA RISORSE MULTIMEDIALI
-      </div>
-
-      <style>
-        z-book-card-app {
-          --z-book-card-app-padding-x: 8px;
-          width: 100%;
-          max-width: 100%;
-          height: 47px;
-
-          @media (min-width: 768px) {
-            --z-book-card-app-padding-x: 16px;
-            width: 315px;
-          }
-        }
-      </style>
-    </z-book-card>`,
-};

package/dist/collection/components/book-card/z-book-card-app/index.stories.js

@@ -1,40 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import "../../z-button/index";
-import "../../z-icon/index";
-import "../../z-tag/index";
-import "../z-book-card-app/index";
-import "./index";
-const StoryMeta = {
-    title: "ZBookCard/ZBookCardApp",
-    component: "z-book-card-app",
-    argTypes: {
-        "--z-book-card-app-padding-x": { control: { type: "text" } },
-        "--z-book-card-app-padding-y": { control: { type: "text" } },
-    },
-    args: {
-        logo: "https://placehold.co/24",
-        name: "Esercizi",
-        laz: true,
-        info: "Cosa fa l'applicazione?",
-        link: "link-applicazione",
-    },
-};
-export default StoryMeta;
-export const CardApp = {
-    args: {
-        "--z-book-card-app-padding-x": null,
-        "--z-book-card-app-padding-y": null,
-    },
-    render: (args) => html `<z-book-card-app
-      logo=${args.logo}
-      name=${args.name}
-      laz=${args.laz}
-      info=${args.info}
-      link=${args.link}
-      style=${styleMap({
-        "--z-book-card-app-padding-x": args["--z-book-card-app-padding-x"],
-        "--z-book-card-app-padding-y": args["--z-book-card-app-padding-y"],
-    })}
-    ></z-book-card-app>`,
-};

package/dist/collection/components/css-components/z-fab/index.stories.js

@@ -1,103 +0,0 @@
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { ICONS } from "../../../constants/iconset";
-import "../../z-icon/index";
-import "./index.stories.css";
-/**
- * You can use the `.z-fab` class on a `<button>` or `<a>` with some additional configuration class:
- * - Sizes: `.z-fab-small`, `.z-fab-x-small`. Default with no size classes, is `big`
- * - Color variants: `.z-fab-primary03`, `.z-fab-surface01`, `.z-fab-surface02`, `.z-fab-surface04`. Default with no color classes, is `primary01`
- * - `.z-fab-extended`: show the label (if any) near the icon
- * - `.z-fab-extendable`: label will be shown only on mouse hover and only on desktop viewports (don't add the `.z-fab-extended` class in this case)
- *
- * Some css custom properties are also available to customize the component:
- * - `--z-fab-right-offset`: the right offset of the fab button (Default: `--grid-margin`)
- * - `--z-fab-bottom-offset`: the bottom offset of the fab button (Default: `--grid-margin`)
- * - `--z-fab-icon-size`: the size of the icon (Default: `20px`)
- * - `--z-fab-icon-fill`: the fill color of the icon (Default: `--color-inverse-icon`)
- *
- * > NB: for the `extended` and `extendable` versions, always wrap the text of the label with some element (e.g. a `<span>`).
- */
-export default {
-    title: "ZFab",
-    argTypes: {
-        icon: {
-            options: Object.keys(ICONS),
-            control: { type: "select" },
-        },
-        size: {
-            options: ["default", "z-fab-small", "z-fab-x-small"],
-            control: { type: "inline-radio" },
-        },
-        colorVariant: {
-            options: ["default", "z-fab-primary03", "z-fab-surface01", "z-fab-surface02", "z-fab-surface04"],
-            control: { type: "inline-radio" },
-        },
-    },
-    args: {
-        "colorVariant": "default",
-        "icon": "question-mark-circle",
-        "label": "Info",
-        "size": "default",
-        "z-fab-extendable": false,
-        "z-fab-extended": true,
-    },
-    parameters: {
-        layout: "fullscreen",
-    },
-    tags: ["!autodocs"],
-};
-export const Default = {
-    render: (args) => html `
-    <button
-      class=${classMap({
-        "z-fab": true,
-        "z-fab-small": args.size === "z-fab-small",
-        "z-fab-x-small": args.size === "z-fab-x-small",
-        "z-fab-primary03": args.colorVariant === "z-fab-primary03",
-        "z-fab-surface01": args.colorVariant === "z-fab-surface01",
-        "z-fab-surface02": args.colorVariant === "z-fab-surface02",
-        "z-fab-surface04": args.colorVariant === "z-fab-surface04",
-        "z-fab-extended": args["z-fab-extended"],
-        "z-fab-extendable": args["z-fab-extendable"],
-    })}
-    >
-      ${args.icon ? html `<z-icon name=${args.icon}></z-icon>` : ""}
-      ${args.label ? html `<span>${args.label}</span>` : ""}
-    </button>
-  `,
-};
-/**
- * Multiple ZFab can be used in the same page (max 3), but only one can be "default". The other ones must have a smaller size and can't have the text.
- * You can space them by setting the `--z-fab-bottom-offset` CSS prop.
- */
-export const Multiple = {
-    render: (args) => html `
-    <button
-      class=${classMap({
-        "z-fab": true,
-        "z-fab-small": args.size === "z-fab-small",
-        "z-fab-x-small": args.size === "z-fab-x-small",
-        "z-fab-primary03": args.colorVariant === "z-fab-primary03",
-        "z-fab-surface01": args.colorVariant === "z-fab-surface01",
-        "z-fab-surface02": args.colorVariant === "z-fab-surface02",
-        "z-fab-surface04": args.colorVariant === "z-fab-surface04",
-        "z-fab-extended": args["z-fab-extended"],
-        "z-fab-extendable": args["z-fab-extendable"],
-    })}
-    >
-      <z-icon name=${args.icon}></z-icon>
-      <span>${args.label}</span>
-    </button>
-    <button
-      class=${classMap({
-        "z-fab": true,
-        "fab2": true,
-        "z-fab-small": true,
-        "z-fab-surface01": true,
-    })}
-    >
-      <z-icon name="support"></z-icon>
-    </button>
-  `,
-};

package/dist/collection/components/css-components/z-label/index.stories.js

@@ -1,9 +0,0 @@
-import { html } from "lit";
-export default {
-    title: "ZLabel",
-    argTypes: {},
-    args: {},
-};
-export const Default = {
-    render: () => html ` <label class="z-label"> Etichetta </label> `,
-};

package/dist/collection/components/css-components/z-link/index.stories.js

@@ -1,73 +0,0 @@
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { ICONS } from "../../../constants/iconset";
-import "../../z-icon/index";
-import "./index.stories.css";
-export default {
-    title: "ZLink",
-    argTypes: {
-        "colorVariant": {
-            options: ["z-link", "z-link-blue", "z-link-red", "z-link-inverse"],
-            control: {
-                type: "inline-radio",
-            },
-        },
-        "icon": {
-            options: [null, ...Object.keys(ICONS)],
-            control: {
-                type: "select",
-                labels: {
-                    null: "No icon",
-                },
-            },
-        },
-        "z-link-icon": {
-            if: {
-                arg: "icon",
-                truthy: true,
-            },
-        },
-    },
-    args: {
-        "colorVariant": "z-link",
-        "text": "Zanichelli.it",
-        "icon": null,
-        "z-link-active": false,
-        "z-link-disabled": false,
-        "z-link-underline": false,
-        "z-link-icon": false,
-        "z-link-sb": false,
-    },
-};
-const getClasses = (args) => ({
-    "z-link": true,
-    "z-link-blue": args.colorVariant === "z-link-blue",
-    "z-link-red": args.colorVariant === "z-link-red",
-    "z-link-inverse": args.colorVariant === "z-link-inverse",
-    "z-link-active": args["z-link-active"],
-    "z-link-disabled": args["z-link-disabled"],
-    "z-link-underline": args["z-link-underline"],
-    "z-link-icon": args["z-link-icon"],
-    "z-link-sb": args["z-link-sb"],
-});
-export const ZLink = {
-    render: (args) => html `
-    <div class="z-link-story">
-      <a
-        href="zanichelli.it"
-        class=${classMap(getClasses(args))}
-      >
-        ${args.icon ? html `<z-icon name=${args.icon}></z-icon>` : ""} ${args.text}
-      </a>
-    </div>
-  `,
-};
-export const ZLinkButton = {
-    render: (args) => html `
-    <div class="z-link-story">
-      <button class=${classMap(getClasses(args))}>
-        ${args.icon ? html `<z-icon name=${args.icon}></z-icon>` : ""} ${args.text}
-      </button>
-    </div>
-  `,
-};