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

package/dist/collection/components/z-offcanvas/index.stories.js

@@ -1,143 +0,0 @@
-import { html } from "lit";
-import { OffCanvasVariant, TransitionDirection } from "../../beans";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZOffcanvas",
-    component: "z-offcanvas",
-    parameters: {
-        layout: "fullscreen",
-        docs: {
-            story: {
-                inline: false,
-                iframeHeight: "600px",
-            },
-        },
-    },
-    argTypes: {
-        variant: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(OffCanvasVariant),
-        },
-        transitiondirection: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(TransitionDirection),
-        },
-        showBackdrop: {
-            control: {
-                if: {
-                    arg: "variant",
-                    eq: OffCanvasVariant.OVERLAY,
-                },
-            },
-        },
-    },
-    args: {
-        "open": true,
-        "showBackdrop": true,
-        "--z-offcanvas--top-space": "0px",
-        "--z-offcanvas--container-width": "375px",
-    },
-};
-export default StoryMeta;
-const DEMO_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.";
-export const OverlayTransitionDirectionRight = {
-    render: (args) => html `<div id="offcanvas-story-container">
-      <z-offcanvas
-        .variant=${OffCanvasVariant.OVERLAY}
-        .open=${args.open}
-        .transitiondirection=${TransitionDirection.RIGHT}
-        .showBackdrop=${args.showBackdrop}
-        style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
-      >
-        <div slot="canvasContent">
-          <p>${DEMO_TEXT}</p>
-        </div>
-      </z-offcanvas>
-      <div class="offcanvas-story-content">
-        <div class="heading-2-sb">Page content</div>
-        ${DEMO_TEXT}
-      </div>
-    </div>`,
-};
-export const OverlayTransitionDirectionLeft = {
-    render: (args) => html `<div id="offcanvas-story-container">
-      <div class="offcanvas-story-content">
-        <div class="heading-2-sb">Page content</div>
-        ${DEMO_TEXT}
-      </div>
-      <z-offcanvas
-        .variant=${OffCanvasVariant.OVERLAY}
-        .open=${args.open}
-        .transitiondirection=${TransitionDirection.LEFT}
-        .showBackdrop=${args.showBackdrop}
-        style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
-      >
-        <div slot="canvasContent">
-          <p>${DEMO_TEXT}</p>
-        </div>
-      </z-offcanvas>
-      ${args.transitiondirection === "right" ? html `<div class="offcanvas-story-content"></div>` : ""}
-    </div>`,
-};
-export const TransitionDirectionUp = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "transitiondirection", "--z-offcanvas--top-space", "--z-offcanvas--container-width"],
-        },
-    },
-    args: {
-        "--z-offcanvas--container-height": "90%",
-    },
-    render: (args) => html `<div id="offcanvas-story-container">
-      <div class="offcanvas-story-content">
-        <div class="heading-2-sb">Page content</div>
-        ${DEMO_TEXT}
-      </div>
-      <z-offcanvas
-        .open=${args.open}
-        .variant=${OffCanvasVariant.OVERLAY}
-        .transitiondirection=${TransitionDirection.UP}
-        .showBackdrop=${args.showBackdrop}
-        style="--z-offcanvas--container-height: ${args["--z-offcanvas--container-height"]}"
-      >
-        <div slot="canvasContent">
-          <p>${DEMO_TEXT}</p>
-        </div>
-      </z-offcanvas>
-    </div>`,
-};
-export const PushContent = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "--z-offcanvas--top-space"],
-        },
-    },
-    args: {
-        transitiondirection: TransitionDirection.RIGHT,
-    },
-    render: (args) => html `<div
-      class="pushcontent-story ${args.transitiondirection}"
-      id="offcanvas-story-container"
-    >
-      <z-offcanvas
-        .open=${args.open}
-        .variant=${OffCanvasVariant.PUSHCONTENT}
-        .transitiondirection=${args.transitiondirection}
-        style="--z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
-      >
-        <div slot="canvasContent">
-          <p>Offcanvas content</p>
-        </div>
-      </z-offcanvas>
-
-      <div class="offcanvas-story-content">
-        <div class="heading-2-sb">Page content</div>
-        ${DEMO_TEXT}
-      </div>
-    </div>`,
-};

package/dist/collection/components/z-pagination/index.stories.js

@@ -1,117 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "./index";
-const StoryMeta = {
-    title: "ZPagination",
-    component: "z-pagination",
-    argTypes: {
-        "totalPages": {
-            control: {
-                type: "number",
-                min: 1,
-            },
-        },
-        "visiblePages": {
-            control: {
-                type: "number",
-                min: 1,
-            },
-            if: {
-                arg: "split",
-                truthy: false,
-            },
-        },
-        "currentPage": {
-            control: {
-                type: "number",
-                min: 1,
-            },
-        },
-        "skip": {
-            control: {
-                type: "number",
-                min: 1,
-            },
-        },
-        "edges": {
-            if: {
-                arg: "split",
-                truthy: false,
-            },
-        },
-        "split": {
-            control: {
-                type: "number",
-                min: 1,
-            },
-        },
-        "--z-pagination-background-color": getColorTokenArgConfig(),
-        "--z-pagination-background-color-hover": getColorTokenArgConfig(),
-    },
-    args: {
-        "label": "",
-        "navArrows": true,
-        "totalPages": 201,
-        "visiblePages": 5,
-        "currentPage": 1,
-        "goToPage": false,
-        "split": undefined,
-        "skip": 0,
-        "edges": false,
-        "--z-pagination-background-color": "var(--color-background)",
-        "--z-pagination-background-color-hover": "var(--color-surface01)",
-    },
-    render: (args) => html `
-    <z-pagination
-      .label=${args.label}
-      .navArrows=${args.navArrows}
-      .totalPages=${args.totalPages}
-      .visiblePages=${args.visiblePages}
-      .skip=${args.skip}
-      .currentPage=${args.currentPage}
-      .goToPage=${args.goToPage}
-      .edges=${args.edges}
-      style=${styleMap({
-        "--z-pagination-background-color": args["--z-pagination-background-color"],
-        "--z-pagination-background-color-hover": args["--z-pagination-background-color-hover"],
-    })}
-    ></z-pagination>
-  `,
-};
-export default StoryMeta;
-export const VisiblePages = {
-    parameters: {
-        controls: {
-            exclude: ["split"],
-        },
-    },
-};
-/**
- * > Note that enabling `split` will shut off `visiblePages` and `edges`.
- */
-export const Split = {
-    args: {
-        split: 1,
-    },
-    parameters: {
-        controls: {
-            exclude: ["edges", "visiblePages"],
-        },
-    },
-};
-export const Edges = {
-    args: {
-        edges: true,
-    },
-    parameters: {
-        controls: {
-            exclude: ["split"],
-        },
-    },
-};
-export const Skip = {
-    args: {
-        skip: 10,
-    },
-};

package/dist/collection/components/z-panel-elem/index.stories.js

@@ -1,25 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "ZPanelElem",
-    component: "z-panel-elem",
-    args: {
-        imgurl: "https://staticdemomy.zanichelli.it/download/biblioteca.png",
-        linkicon: "arrow-quad-down",
-        linklabel: "Biblioteca",
-        url: "https://biblioteca.scuola.zanichelli.it/",
-        elemid: "elem_id",
-        isdisabled: false,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-panel-elem
-      imgurl="${args.imgurl}"
-      linkicon="${args.linkicon}"
-      linklabel="${args.linklabel}"
-      url="${args.url}"
-      elemid="${args.elemid}"
-      isdisabled="${args.isdisabled}"
-    ></z-panel-elem>`,
-};

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

@@ -1,282 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { PopoverPosition } from "../../beans";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "../list/z-list-element/index";
-import "../list/z-list/index";
-import "../z-button/index";
-import "../z-offcanvas/index";
-import "./index";
-import "./index.stories.css";
-const onTriggerClick = (event) => {
-    var _a;
-    const popover = (_a = event.target.closest(".popover-container")) === null || _a === void 0 ? void 0 : _a.querySelector("z-popover");
-    if (!popover) {
-        return;
-    }
-    if (popover === null || popover === void 0 ? void 0 : popover.open) {
-        popover.open = false;
-    }
-    else {
-        popover.open = true;
-    }
-};
-/**
- * Simple drag and drop utility.
- * @param element The element to make draggable.
- */
-const makeDraggable = (element) => {
-    if (element.draggable) {
-        return;
-    }
-    let offsetX = 0;
-    let offsetY = 0;
-    let dragging = false;
-    let clickPosition = { x: 0, y: 0 };
-    element.style.position = "absolute";
-    element.draggable = true;
-    element.addEventListener("mousedown", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        dragging = true;
-        offsetX = element.offsetLeft - event.clientX;
-        offsetY = element.offsetTop - event.clientY;
-        clickPosition = { x: event.clientX, y: event.clientY };
-    });
-    document.addEventListener("mouseup", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        dragging = false;
-        if (clickPosition.x !== event.clientX || clickPosition.y !== event.clientY) {
-            return;
-        }
-        setTimeout(() => {
-            onTriggerClick(Object.assign(Object.assign({}, event), { target: element }));
-        }, 0);
-    });
-    document.addEventListener("mousemove", (event) => {
-        if (dragging) {
-            const container = element.parentElement;
-            const left = Math.max(Math.min(event.clientX + offsetX, container.clientWidth - element.offsetWidth), 0);
-            const top = Math.max(Math.min(event.clientY + offsetY, container.clientHeight - element.offsetHeight), 0);
-            element.style.left = `${left}px`;
-            element.style.top = `${top}px`;
-        }
-    });
-};
-const StoryMeta = {
-    title: "ZPopover",
-    component: "z-popover",
-    argTypes: {
-        "position": {
-            options: [null, ...Object.values(PopoverPosition).filter((value) => value !== PopoverPosition.AUTO)],
-            control: {
-                type: "select",
-                labels: {
-                    null: "-",
-                },
-            },
-        },
-        "--z-popover-theme--surface": getColorTokenArgConfig(),
-        "--z-popover-theme--text": getColorTokenArgConfig(),
-    },
-    args: {
-        "position": null,
-        "--z-popover-theme--surface": "var(--color-surface01)",
-        "--z-popover-theme--text": "var(--color-default-text)",
-        "--z-popover-padding": "0",
-    },
-    parameters: {
-        onTriggerClick,
-        docs: {
-            story: {
-                inline: false,
-                iframeHeight: 500,
-            },
-        },
-    },
-};
-export default StoryMeta;
-export const Demo = {
-    args: {
-        "--z-popover-padding": "var(--space-unit)",
-        "--z-popover-shadow-filter": "drop-shadow(0 1px 2px var(--shadow-color-base))",
-        "center": false,
-        "showArrow": false,
-        "closable": true,
-    },
-    render: (args) => {
-        document.addEventListener("DOMContentLoaded", () => {
-            const trigger = document.querySelector("#demo-trigger");
-            if (trigger) {
-                makeDraggable(trigger);
-            }
-        });
-        return html `
-      <div class="popover-container">
-        <z-popover
-          style=${styleMap({
-            "--z-popover-theme--surface": args["--z-popover-theme--surface"],
-            "--z-popover-theme--text": args["--z-popover-theme--text"],
-            "--z-popover-padding": args["--z-popover-padding"],
-        })}
-          .position=${args.position}
-          .center=${args.center}
-          .showArrow=${args.showArrow}
-          bind-to="#demo-trigger"
-        >
-          <div class="popover-content">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua.
-          </div>
-        </z-popover>
-        <z-button
-          id="demo-trigger"
-          icon="plus-filled"
-        ></z-button>
-      </div>
-      <p class="heading-2">You can move the button to see the positioning adaptation while the popover is open.</p>
-    `;
-    },
-};
-export const ContextualMenuLike = {
-    args: {
-        "--z-popover-theme--surface": "var(--color-surface01)",
-        "--z-popover-padding": "var(--space-unit)",
-        "position": PopoverPosition.RIGHT_BOTTOM,
-    },
-    render: (args, { parameters }) => html `
-    <div class="popover-container">
-      <z-popover
-        style=${styleMap({
-        "--z-popover-theme--surface": args["--z-popover-theme--surface"],
-        "--z-popover-theme--text": args["--z-popover-theme--text"],
-        "--z-popover-padding": args["--z-popover-padding"],
-    })}
-        .position=${args.position}
-        bind-to="#trigger"
-      >
-        <z-list>
-          <z-list-element divider-type="element">Elemento 1</z-list-element>
-          <z-list-element divider-type="element">Elemento 2</z-list-element>
-          <z-list-element>Elemento 3</z-list-element>
-        </z-list>
-      </z-popover>
-      <z-button
-        id="trigger"
-        icon="plus-filled"
-        .onclick=${parameters.onTriggerClick}
-      ></z-button>
-    </div>
-  `,
-};
-export const Tooltip = {
-    args: {
-        "position": PopoverPosition.RIGHT,
-        "--z-popover-padding": "var(--space-unit)",
-    },
-    render: (args, { parameters }) => html ` <div class="popover-container popover-container-tooltip">
-      <z-popover
-        style=${styleMap({
-        "--z-popover-theme--surface": args["--z-popover-theme--surface"],
-        "--z-popover-theme--text": args["--z-popover-theme--text"],
-        "--z-popover-padding": args["--z-popover-padding"],
-    })}
-        .position=${args.position}
-        center="true"
-        show-arrow="true"
-        bind-to="#trigger"
-      >
-        <div class="popover-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua.
-        </div>
-      </z-popover>
-      <z-button
-        id="trigger"
-        icon="plus-filled"
-        .onclick=${parameters.onTriggerClick}
-      ></z-button>
-    </div>`,
-};
-export const TooltipWithNestedContainer = {
-    args: {
-        "position": PopoverPosition.TOP,
-        "--z-popover-padding": "var(--space-unit)",
-    },
-    render: (args, { parameters }) => html ` <div class="popover-container popover-container-tooltip">
-      <div class="popover-internal-container">
-        <div class="popover-internal-container-2">
-          <z-popover
-            style=${styleMap({
-        "--z-popover-theme--surface": args["--z-popover-theme--surface"],
-        "--z-popover-theme--text": args["--z-popover-theme--text"],
-        "--z-popover-padding": args["--z-popover-padding"],
-    })}
-            .position=${args.position}
-            center="true"
-            show-arrow="true"
-            bind-to="#trigger"
-          >
-            <div class="popover-content">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.
-            </div>
-          </z-popover>
-          <z-button
-            id="trigger"
-            icon="plus-filled"
-            .onclick=${parameters.onTriggerClick}
-          ></z-button>
-        </div>
-      </div>
-    </div>`,
-};
-export const PopoverInsideTransformedElement = {
-    args: {
-        "position": PopoverPosition.TOP,
-        "--z-popover-padding": "var(--space-unit)",
-    },
-    render: (args, { parameters }) => html `<div class="popover-container">
-      <script>
-        document.addEventListener("DOMContentLoaded", () => {
-          const offcanvasTrigger = document.querySelector("#offcanvas-trigger");
-          if (offcanvasTrigger) {
-            offcanvasTrigger.addEventListener("click", () => {
-              const offcanvas = document.querySelector(".popover-container z-offcanvas");
-              if (offcanvas) {
-                offcanvas.open = true;
-              }
-            });
-          }
-        });
-      </script>
-      <z-button id="offcanvas-trigger">open offcanvas</z-button>
-      <z-offcanvas
-        transitiondirection="up"
-        show-backdrop
-      >
-        <div slot="canvasContent">
-          <z-popover
-            style=${styleMap({
-        "--z-popover-theme--surface": args["--z-popover-theme--surface"],
-        "--z-popover-theme--text": args["--z-popover-theme--text"],
-        "--z-popover-padding": args["--z-popover-padding"],
-    })}
-            .position=${args.position}
-            bind-to="#popover-trigger"
-          >
-            <div class="popover-content">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.
-            </div>
-          </z-popover>
-          <z-button
-            id="popover-trigger"
-            icon="plus-filled"
-            .onclick=${parameters.onTriggerClick}
-          ></z-button>
-        </div>
-      </z-offcanvas>
-    </div>`,
-};