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

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

@@ -1,128 +0,0 @@
-import { html } from "lit";
-import { repeat } from "lit/directives/repeat.js";
-import { CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
-import "../z-ghost-loading/index";
-import "./index";
-import "./index.stories.css";
-/**
- * This component was conceived as a list of elements to respect the rules of accessibility (https://www.w3.org/WAI/tutorials/carousels/working-example/).
- * Pass any number of elements inside its main `slot`.
- * @example```
- * <z-carousel>
- *  <li>element</li>
- *  <li>element</li>
- *  <li>element</li>
- * </z-carousel>
- * ```
- * > Note: always use `li` elements as direct children of `z-carousel`, as it wraps them with an `ul` element.
- * You can set the gutter between the elements by using the `--z-carousel-gutter` custom property.
- * @example```
- * z-carousel {
- *  --z-carousel-gutter: calc(var(--space-unit) * 2);
- * }```
- */
-const StoryMeta = {
-    title: "ZCarousel",
-    component: "z-carousel",
-    decorators: [(Story) => html `<div class="z-carousel-story-container">${Story()}</div>`],
-};
-export default StoryMeta;
-export const SlideshowWithArrowsOver = {
-    args: {
-        "label": "",
-        "--z-carousel-gutter": "var(--space-unit)",
-        "infinite": false,
-        "fixedArrows": true,
-        "itemsCount": 8,
-    },
-    render: (args) => html `<z-carousel
-      .arrowsPosition=${CarouselArrowsPosition.OVER}
-      .fixedArrows=${args.fixedArrows}
-      .infinite=${args.infinite}
-      label=${args.label}
-      style="--z-carousel-gutter: ${args["--z-carousel-gutter"]}"
-    >
-      ${repeat([...new Array(args.itemsCount)].map((_, i) => i), (i) => i, (_, index) => html `<li><div class="carousel-box">${index + 1}</div></li>`)}
-    </z-carousel>`,
-};
-export const SingleMode = {
-    parameters: {
-        layout: "centered",
-    },
-    argTypes: {
-        arrowsPosition: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(CarouselArrowsPosition),
-        },
-        progressMode: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(CarouselProgressMode),
-        },
-    },
-    args: {
-        label: "Carousel title",
-        progressMode: CarouselProgressMode.DOTS,
-        arrowsPosition: CarouselArrowsPosition.BOTTOM,
-        infinite: false,
-        fixedArrows: true,
-        itemsCount: 8,
-    },
-    render: (args) => html `<z-carousel
-      .arrowsPosition=${args.arrowsPosition}
-      .fixedArrows=${args.fixedArrows}
-      .infinite=${args.infinite}
-      .progressMode=${args.progressMode}
-      .single=${true}
-      label=${args.label}
-    >
-      ${repeat([...new Array(args.itemsCount)].map((_, i) => i), (i) => i, (_, index) => html `<li><div class="carousel-box">${index + 1}</div></li>`)}
-    </z-carousel>`,
-};
-/**
- * You can handle ghost loading for the whole z-carousel by setting two properties:
- * - `isLoading` (boolean): to show a `z-ghost-loading` component instead of the carousel content.
- * - `ghostLoadingHeight` (number): to set the height of the `z-ghost-loading` component.
- * You can also manually handle ghost loading by putting <z-ghost-loading> elements as items.
- */
-export const GhostLoading = {
-    args: {
-        label: "Carousel title",
-        ghostLoadingHeight: 265,
-    },
-    parameters: {
-        controls: {
-            exclude: ["infinite"],
-        },
-    },
-    render: (args) => html `<z-carousel
-      label=${args.label}
-      .isLoading=${true}
-      .ghostLoadingHeight=${args.ghostLoadingHeight}
-    ></z-carousel>`,
-};
-export const LoadingItems = {
-    args: {
-        "label": "Carousel title",
-        "--z-carousel-gutter": "8px",
-    },
-    parameters: {
-        controls: {
-            exclude: ["infinite"],
-        },
-    },
-    render: (args) => html `<z-carousel
-      label=${args.label}
-      .infinite=${args.infinite}
-      style="--z-carousel-gutter: ${args["--z-carousel-gutter"]}"
-    >
-      ${repeat(new Array(8), () => html `<li>
-            <div class="carousel-box-loading">
-              <z-ghost-loading></z-ghost-loading>
-            </div>
-          </li>`)}
-    </z-carousel>`,
-};

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

@@ -1,69 +0,0 @@
-import { html } from "lit";
-import { ZChipType } from "../../beans";
-import { ICONS } from "../../constants/iconset";
-import "./index";
-const StoryMeta = {
-    title: "ZChip",
-    argTypes: {
-        type: {
-            options: Object.values(ZChipType),
-            control: {
-                type: "radio",
-            },
-        },
-    },
-    args: {
-        type: ZChipType.DEFAULT,
-        icon: "pdf",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-chip
-      type=${args.type}
-      icon=${args.icon}
-      >my custom element</z-chip
-    >
-  `,
-};
-export const DifferentFontWeight = {
-    render: (args) => html `
-    <z-chip
-      type=${args.type}
-      icon=${args.icon}
-    >
-      <strong>my</strong>
-      <span style="margin-left: 4px">custom element</span>
-    </z-chip>
-  `,
-};
-export const InteractiveIcon = {
-    argTypes: {
-        icon: {
-            options: Object.keys(ICONS),
-            control: {
-                type: "select",
-            },
-        },
-        interactiveIcon: {
-            options: Object.keys(ICONS),
-            control: {
-                type: "select",
-            },
-        },
-    },
-    args: {
-        interactiveIcon: "multiply-circled",
-        disabled: false,
-    },
-    render: (args) => html `
-    <z-chip
-      type=${args.type}
-      icon=${args.icon}
-      disabled=${args.disabled}
-      .interactiveIcon=${args.interactiveIcon}
-      >my custom element</z-chip
-    >
-  `,
-};

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

@@ -1,33 +0,0 @@
-import { html } from "lit";
-import { ColorPickerPalette } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZColorPicker",
-    component: "z-color-picker",
-    argTypes: {
-        lng: {
-            control: { type: "inline-radio" },
-            options: ["it", "en"],
-        },
-        selectedColor: {
-            control: {
-                type: "select",
-                labels: Object.fromEntries(Object.entries(ColorPickerPalette).map(([color, label]) => [color, label.it])),
-            },
-            options: Object.keys(ColorPickerPalette),
-        },
-    },
-    args: {
-        lng: "it",
-        htmlAriaLabel: "Seleziona un colore",
-        selectedColor: undefined,
-        disableTransparent: false,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-color-picker
-      .selectedColor=${args.selectedColor}
-      .disableTransparent=${args.disableTransparent}
-    ></z-color-picker>`,
-};

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

@@ -1,77 +0,0 @@
-import { html } from "lit";
-import { ControlSize } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZCombobox",
-    component: "z-combobox",
-    argTypes: {
-        items: {
-            control: {
-                type: "object",
-            },
-        },
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ControlSize),
-        },
-    },
-    args: {
-        items: [
-            { id: "ite_m_1", name: "First item", checked: false, category: "Gruppo 1" },
-            { id: "ite_m_2", name: "Second item", checked: false, category: "Gruppo 1" },
-            { id: "it_em_3", name: "Other item", checked: false, category: "Gruppo 2" },
-            { id: "it_e_m_5", name: "Last item", checked: false, category: "Gruppo 3" },
-        ],
-        checkalltext: "Select all",
-        disabled: false,
-        hascheckall: true,
-        hassearch: true,
-        inputid: "combo_1",
-        isfixed: true,
-        isopen: true,
-        label: "Combobox Label",
-        maxcheckableitems: 4,
-        hasgroupitems: false,
-        noresultslabel: "No items",
-        searchlabel: "Search Label",
-        searchplaceholder: "Search Placeholder",
-        searchtitle: "Search Title",
-        uncheckalltext: "Uncheck All",
-        size: ControlSize.BIG,
-        htmlAriaLabel: "",
-    },
-    render: (args) => html `<z-combobox
-      checkalltext=${args.checkalltext}
-      disabled=${args.disabled}
-      hascheckall=${args.hascheckall}
-      hassearch=${args.hassearch}
-      inputid=${args.inputid}
-      isfixed=${args.isfixed}
-      isopen=${args.isopen}
-      .items=${args.items}
-      label=${args.label}
-      maxcheckableitems=${args.maxcheckableitems}
-      hasgroupitems=${args.hasgroupitems}
-      noresultslabel=${args.noresultslabel}
-      searchlabel=${args.searchlabel}
-      searchplaceholder=${args.searchplaceholder}
-      searchtitle=${args.searchtitle}
-      uncheckalltext=${args.uncheckalltext}
-      size=${args.size}
-      html-aria-label=${args.htmlAriaLabel}
-    />`,
-};
-export default StoryMeta;
-export const Default = {};
-export const Groups = {
-    args: {
-        hasgroupitems: true,
-    },
-};
-export const Disabled = {
-    args: {
-        disabled: true,
-    },
-};

package/dist/collection/components/z-cover-hero/index.stories.js

@@ -1,255 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "../z-button/index";
-import "../z-info-reveal/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZCoverHero",
-    component: "z-cover-hero",
-    argTypes: {
-        "variant": {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(CoverHeroVariant),
-        },
-        "contentPosition": {
-            if: {
-                arg: "variant",
-                eq: CoverHeroVariant.STACKED,
-            },
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(CoverHeroContentPosition),
-        },
-        "--cover-hero-text-color": getColorTokenArgConfig(),
-        "--cover-hero-overlay": {
-            if: {
-                arg: "variant",
-                eq: CoverHeroVariant.OVERLAY,
-            },
-        },
-        "--cover-hero-aspect-ratio": {
-            if: {
-                arg: "preserveAspectRatio",
-            },
-            control: {
-                type: "text",
-            },
-        },
-    },
-    args: {
-        "variant": CoverHeroVariant.OVERLAY,
-        "contentPosition": CoverHeroContentPosition.TOP,
-        "preserveAspectRatio": true,
-        "--cover-hero-aspect-ratio": undefined,
-        "--cover-hero-overlay": "linear-gradient(270deg, #0000 0%, #000000e6 100%)",
-        "--cover-hero-text-color": "var(--color-text-inverse)",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <div class="z-cover-hero-story-container">
-      <z-cover-hero
-        .contentPosition=${args.contentPosition}
-        .variant=${args.variant}
-        .preserveAspectRatio=${args.preserveAspectRatio}
-        style=${styleMap({
-        "--cover-hero-overlay": args["--cover-hero-overlay"],
-        "--cover-hero-text-color": args["--cover-hero-text-color"],
-        "--cover-hero-aspect-ratio": args["--cover-hero-aspect-ratio"],
-    })}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea
-            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur.
-          </div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-        <z-info-reveal
-          slot="info-reveal"
-          position="bottom_right"
-        >
-          <span>Lorem ipsum dolor sit amet.</span>
-        </z-info-reveal>
-      </z-cover-hero>
-    </div>
-  `,
-};
-export const CustomAspectRatio = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "preserveAspectRatio"],
-        },
-    },
-    args: {
-        "--cover-hero-aspect-ratio": "16/8",
-    },
-    render: (args) => html `
-    <div class="z-cover-hero-story-container">
-      <z-cover-hero
-        style=${styleMap({
-        "--cover-hero-overlay": args["--cover-hero-overlay"],
-        "--cover-hero-text-color": args["--cover-hero-text-color"],
-        "--cover-hero-aspect-ratio": args["--cover-hero-aspect-ratio"],
-    })}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea
-            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur.
-          </div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-        <z-info-reveal
-          slot="info-reveal"
-          position="bottom_right"
-        >
-          <span>Lorem ipsum dolor sit amet.</span>
-        </z-info-reveal>
-      </z-cover-hero>
-    </div>
-  `,
-};
-export const AutoAspectRatio = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "preserveAspectRatio"],
-        },
-    },
-    args: {
-        "--cover-hero-aspect-ratio": "",
-    },
-    render: (args) => html `
-    <div class="z-cover-hero-story-container z-cover-hero-auto-ratio">
-      <z-cover-hero
-        style=${styleMap({
-        "--cover-hero-overlay": args["--cover-hero-overlay"],
-        "--cover-hero-text-color": args["--cover-hero-text-color"],
-        "--cover-hero-aspect-ratio": args["--cover-hero-aspect-ratio"],
-    })}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/4934920/pexels-photo-4934920.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea
-            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur.
-          </div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-      </z-cover-hero>
-    </div>
-  `,
-};
-export const WithoutPreservingAspectRatio = {
-    argTypes: {
-        "variant": { table: { disable: true } },
-        "preserveAspectRatio": { table: { disable: true } },
-        "--cover-hero-aspect-ratio": { table: { disable: true } },
-    },
-    args: {
-        textContent: "Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
-    },
-    render: (args) => html `
-    <div class="z-cover-hero-story-container">
-      <z-cover-hero
-        .preserveAspectRatio=${false}
-        style=${styleMap({
-        "--cover-hero-overlay": args["--cover-hero-overlay"],
-        "--cover-hero-text-color": args["--cover-hero-text-color"],
-    })}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>${args.textContent}</div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-      </z-cover-hero>
-    </div>
-  `,
-};
-export const StackedVariant = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "preserveAspectRatio", "--cover-hero-aspect-ratio", "--cover-hero-text-color"],
-        },
-    },
-    args: {
-        variant: CoverHeroVariant.STACKED,
-    },
-    render: (args) => html `
-    <div class="z-cover-hero-story-container">
-      <z-cover-hero
-        .contentPosition=${args.contentPosition}
-        .preserveAspectRatio=${args.preserveAspectRatio}
-        .variant=${args.variant}
-      >
-        <img
-          slot="cover"
-          src="https://images.pexels.com/photos/10323759/pexels-photo-10323759.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-          alt=""
-        />
-        <div slot="content">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore
-            magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea
-            commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur.
-          </div>
-          <div class="buttons">
-            <z-button variant="primary">Primary</z-button>
-            <z-button variant="secondary">Secondary</z-button>
-          </div>
-        </div>
-        <z-info-reveal
-          slot="info-reveal"
-          position="bottom_right"
-        >
-          <span>Lorem ipsum dolor sit amet.</span>
-        </z-info-reveal>
-      </z-cover-hero>
-    </div>
-  `,
-};

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

@@ -1,44 +0,0 @@
-import { html } from "lit";
-import { DividerOrientation, DividerSize } from "../../beans";
-import { getColorTokens } from "../../utils/storybook-utils";
-import "./index";
-const StoryMeta = {
-    title: "ZDivider",
-    component: "z-divider",
-    argTypes: {
-        size: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(DividerSize),
-        },
-        orientation: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(DividerOrientation),
-        },
-        color: {
-            control: {
-                type: "select",
-            },
-            options: getColorTokens().map((token) => token.replace("--", "")),
-        },
-    },
-    args: {
-        size: DividerSize.SMALL,
-        color: "gray200",
-        orientation: DividerOrientation.HORIZONTAL,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<div style="height: 300px; padding: 24px">
-      <z-divider
-        size="${args.size}"
-        color="${args.color}"
-        orientation="${args.orientation}"
-      ></z-divider>
-    </div>`,
-    name: "ZDivider",
-};

package/dist/collection/components/z-ghost-loading/index.stories.js

@@ -1,21 +0,0 @@
-import { html } from "lit";
-import "./index";
-export default {
-    title: "ZGhostLoading",
-    component: "z-ghost-loading",
-};
-export const ZGhostLoading = {
-    render: () => html `<div style="height:24px; padding-bottom:8px;"><z-ghost-loading></z-ghost-loading></div>
-      <div style="width:50%; height:24px"><z-ghost-loading></z-ghost-loading></div>
-      <br /><br />
-      <div style="height:12px; padding-bottom:8px;"><z-ghost-loading></z-ghost-loading></div>
-      <div style="height:12px; padding-bottom:8px;"><z-ghost-loading></z-ghost-loading></div>
-      <div style="height:12px; padding-bottom:8px;"><z-ghost-loading></z-ghost-loading></div>
-      <div style="width:50%; height:12px"><z-ghost-loading></z-ghost-loading></div>
-      <br /><br />
-      <div style="display:flex">
-        <div style="width:30%; height:50px; padding-right:20px"><z-ghost-loading></z-ghost-loading></div>
-        <div style="width:30%; height:50px; padding-right:20px"><z-ghost-loading></z-ghost-loading></div>
-        <div style="width:30%; height:50px;"><z-ghost-loading></z-ghost-loading></div>
-      </div>`,
-};