@zanichelli/albe-web-components 19.2.12-rc2 → 19.2.12

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>
-  `,
-};

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

@@ -1,72 +0,0 @@
-import { html } from "lit";
-import "./index.stories.css";
-/**
- * <p>If applied to elements with CSS property "overflow:scroll", the class will apply to both the vertical AND the horizontal scrollbars. To avoid this, use "overflow-y" instead.</p>
- * Bear in mind that the scrollbar behaves in different ways depending on the browser: <br />
- *    <ul>
- *      <li>Chrome desktop + Android + MS Edge + opera:
- *        <ul>
- *          <li>primary color scrollbar thumb with right angles</li>
- *          <li>gray scrollbar track</li>
- *          <li>thumb gets darker on hover</li>
- *          <li>thumb doesn't bounce when at end of track</li>
- *        </ul>
- *      </li>
- *      <li>Safari on Mac + chromium 69 (booktab):
- *        <ul>
- *          <li>thumb bounces when at end of track</li>
- *        </ul>
- *      </li>
- *      <li>Safari on iPad:
- *        <ul>
- *          <li>no scrollbars</li>
- *        </ul>
- *      </li>
- *      <li>Chrome on iPad:
- *        <ul>
- *          <li>gray, narrower thumb</li>
- *          <li>no track</li>
- *        </ul>
- *      </li>
- *      <li>Firefox desktop:
- *        <ul>
- *          <li>thumb has border radius</li>
- *          <li>no track</li>
- *          <li>thumb gets wider on hover</li>
- *        </ul>
- *      </li>
- *      <li>Firefox on Android:
- *        <ul>
- *          <li>th scrollbar disappears if you're not actively scrolling</li>
- *          <li>thumb has border radius</li>
- *          <li>no track</li>
- *        </ul>
- *      </li>
- *      <li>Samsung browser:
- *        <ul>
- *          <li>no side margins</li>
- *        </ul>
- *      </li>
- *    </ul>
- */
-const StoryMeta = {
-    title: "ZScrollbar",
-};
-export default StoryMeta;
-export const Default = {
-    render: () => html `
-    <div class="z-scrollbar-story">
-      <div class="scrollbar-container z-scrollbar">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales purus et congue pellentesque. Sed quis
-          venenatis nibh. Cras ut velit vel nisl cursus euismod ac quis lorem. In eget nisl lectus. Quisque id nibh in
-          nisi viverra varius vitae id est. Nulla tincidunt mi eget consequat lacinia. Quisque rhoncus dolor a tortor
-          fermentum molestie. Vivamus posuere non sapien vitae auctor. Donec dignissim efficitur consectetur.
-          Suspendisse eu bibendum tortor. Nulla facilisi. Mauris pharetra eleifend dolor. Morbi velit odio, mollis et
-          euismod eu, imperdiet in lectus. Maecenas laoreet tellus et diam finibus blandit. Mauris aliquam quis tellus
-          et congue.
-        </p>
-      </div>
-    </div>
-  `,
-};

package/dist/collection/components/date-picker/z-date-picker/index.stories.js

@@ -1,111 +0,0 @@
-import { html } from "lit";
-import { ZDatePickerMode } from "../../../beans";
-import "../../z-button/index";
-import "../index.stories.css";
-import "./index";
-/**
- * In order to avoid conflits between datepickers, pass a unique id as `datePickerId` prop.
- * This component emits an event called `dateSelect` with the value of the selected date.
- */
-const StoryMeta = {
-    title: "ZDatePicker",
-    component: "z-date-picker",
-    argTypes: {
-        mode: {
-            options: Object.values(ZDatePickerMode),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    args: {
-        ariaLabel: "date-picker",
-        mode: ZDatePickerMode.DATE,
-    },
-    render: (args) => html `
-    <script>
-      document.getElementById("${args.datePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output-${args.datePickerId}");
-        input.innerHTML = "[" + e.detail + "]";
-      });
-    </script>
-    <div class="story-container">
-      <div class="story-picker-container">
-        <z-date-picker
-          mode=${args.mode}
-          .datePickerId=${args.datePickerId}
-          id=${args.datePickerId}
-          ariaLabel=${args.ariaLabel}
-          label=${args.label}
-          value=${args.value}
-        ></z-date-picker>
-      </div>
-      <div class="story-output-container">
-        <span>OUTPUT:</span>
-        <br />
-        <span id="output-${args.datePickerId}" />
-      </div>
-    </div>
-  `,
-};
-export default StoryMeta;
-export const Date = {
-    args: {
-        datePickerId: "picker-01",
-        label: "ZDatePicker with date",
-        value: "25-12-2024",
-    },
-};
-export const DateAndTime = {
-    args: {
-        datePickerId: "picker-02",
-        label: "ZDatePicker with date and time",
-        mode: ZDatePickerMode.DATE_TIME,
-        value: "05-12-2024 - 12:01",
-        name: "date-time-picker",
-    },
-};
-export const MonthsOnly = {
-    args: {
-        datePickerId: "picker-03",
-        label: "ZDatePicker with only months",
-        mode: ZDatePickerMode.MONTHS,
-        value: "12-2024",
-        name: "month-picker",
-    },
-};
-export const CustomToggle = {
-    args: {
-        datePickerId: "picker-04",
-        label: "date picker",
-        value: "25-01-2024",
-        name: "date-toogle-picker",
-    },
-    render: (args) => html `
-    <script>
-      document.getElementById("${args.datePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output-${args.datePickerId}");
-        input.innerHTML = "[" + e.detail + "]";
-      });
-    </script>
-    <div class="story-container">
-      <div class="story-picker-container">
-        <z-date-picker
-          mode=${args.mode}
-          .datePickerId=${args.datePickerId}
-          id=${args.datePickerId}
-          ariaLabel=${args.ariaLabel}
-          label=${args.label}
-          value=${args.value}
-        >
-          <z-button slot="toggle">Open ZDatePicker</z-button>
-        </z-date-picker>
-      </div>
-      <div class="story-output-container">
-        <span>OUTPUT:</span>
-        <br />
-        <span id="output-${args.datePickerId}" />
-      </div>
-    </div>
-  `,
-};

package/dist/collection/components/date-picker/z-range-picker/index.stories.js

@@ -1,109 +0,0 @@
-import { html } from "lit";
-import { ZRangePickerMode } from "../../../beans";
-import "../index.stories.css";
-import "./index";
-/**
- * In order to avoid conflits between datepickers, pass a unique id as `rangePickerId` prop.
- * This component has a callback function `dateSelect` that returns the selected date.
- */
-const StoryMeta = {
-    title: "ZRangePicker",
-    component: "z-range-picker",
-    argTypes: {
-        mode: {
-            options: Object.values(ZRangePickerMode),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-};
-export default StoryMeta;
-export const Date = {
-    args: {
-        mode: ZRangePickerMode.DATE,
-        rangePickerId: "picker-01",
-        firstLabel: "Start date",
-        firstAriaLabel: "start-date",
-        secondLabel: "End date",
-        secondAriaLabel: "end-date",
-        firstPickerPlaceholder: "placeholder1",
-        lastPickerPlaceholder: "placeholder2",
-        firstPickerReadOnly: false,
-        lastPickerReadOnly: false,
-    },
-    render: (args) => html `
-    <script>
-      document.getElementById("${args.rangePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output");
-        input.innerHTML = "[" + e.detail[0] + ", " + e.detail[1] + "]";
-      });
-    </script>
-    <div class="story-container">
-      <div class="story-picker-container">
-        <z-range-picker
-          mode=${args.mode}
-          range-picker-id=${args.rangePickerId}
-          id=${args.rangePickerId}
-          first-aria-label=${args.firstAriaLabel}
-          first-label=${args.firstLabel}
-          second-aria-label=${args.secondAriaLabel}
-          second-label=${args.secondLabel}
-          first-picker-placeholder=${args.firstPickerPlaceholder}
-          last-picker-placeholder=${args.lastPickerPlaceholder}
-          first-picker-read-only=${args.firstPickerReadOnly}
-          last-picker-read-only=${args.lastPickerReadOnly}
-        ></z-range-picker>
-      </div>
-      <div class="story-output-container">
-        <span>OUTPUT:</span>
-        <br />
-        <span id="output" />
-      </div>
-    </div>
-  `,
-};
-export const DateAndTime = {
-    args: {
-        mode: ZRangePickerMode.DATE_TIME,
-        rangePickerId: "picker-02",
-        firstLabel: "Start date",
-        firstAriaLabel: "start-date",
-        secondLabel: "End date",
-        secondAriaLabel: "end-date",
-        firstPickerPlaceholder: "placeholder1",
-        lastPickerPlaceholder: "placeholder2",
-        firstPickerReadOnly: false,
-        lastPickerReadOnly: false,
-    },
-    render: (args) => html `
-    <script>
-      document.getElementById("${args.rangePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output");
-        input.innerHTML = "[" + e.detail[0] + ", " + e.detail[1] + "]";
-      });
-    </script>
-    <div class="story-container">
-      <div class="story-picker-container">
-        <z-range-picker
-          mode=${args.mode}
-          range-picker-id=${args.rangePickerId}
-          id=${args.rangePickerId}
-          first-aria-label=${args.firstAriaLabel}
-          first-label=${args.firstLabel}
-          second-aria-label=${args.secondAriaLabel}
-          second-label=${args.secondLabel}
-          first-picker-placeholder=${args.firstPickerPlaceholder}
-          last-picker-placeholder=${args.lastPickerPlaceholder}
-          first-picker-read-only=${args.firstPickerReadOnly}
-          last-picker-read-only=${args.lastPickerReadOnly}
-        ></z-range-picker>
-      </div>
-      <div class="story-output-container">
-        <span>OUTPUT:</span>
-        <br />
-        <span id="output" />
-      </div>
-    </div>
-  `,
-};