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

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

@@ -1,147 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "ZResultCard",
-    component: "z-result-card",
-    argTypes: {
-        cardTitle: { control: "text" },
-        cardSubtitle: { control: "text" },
-        authors: { control: "text" },
-        cover: { control: "text" },
-        fallbackCover: { control: "text" },
-        hasMultipleCovers: { control: "boolean" },
-        isInfoCard: { control: "boolean" },
-    },
-};
-export default StoryMeta;
-const args = {
-    cardTitle: "Title",
-    cardSubtitle: "Subtitle",
-    authors: "John Doe",
-    cover: "https://place.abh.ai/s3fs-public/placeholder/DSC_0199_400x400.JPG",
-    fallbackCover: "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
-    hasMultipleCovers: false,
-    isInfoCard: false,
-    titleHtmlTag: "h2",
-};
-export const SingleCover = {
-    args: Object.assign({}, args),
-    render: (args) => html `
-    <z-result-card
-      .cardTitle=${args.cardTitle}
-      .cardSubtitle=${args.cardSubtitle}
-      .authors=${args.authors}
-      .cover=${args.cover}
-      fallback-cover=${args.fallbackCover}
-      .hasMultipleCovers=${args.hasMultipleCovers}
-      .isInfoCard=${args.isInfoCard}
-      .titleHtmlTag=${args.titleHtmlTag}
-    >
-      <span slot="tags">Example tag</span>
-      <span slot="volumes">2 volumes</span>
-    </z-result-card>
-  `,
-};
-export const SingleCoverLateralSpaces = {
-    args: Object.assign({}, args),
-    render: (args) => html `
-    <z-result-card
-      .cardTitle=${args.cardTitle}
-      .cardSubtitle=${args.cardSubtitle}
-      .authors=${args.authors}
-      cover="https://statictestmy.zanichelli.it/catalogo/assets/small/m40003.9788808075475.jpg"
-      fallback-cover=${args.fallbackCover}
-      .hasMultipleCovers=${args.hasMultipleCovers}
-      .isInfoCard=${args.isInfoCard}
-      .titleHtmlTag=${args.titleHtmlTag}
-    >
-      <span slot="tags">Example tag</span>
-      <span slot="volumes">2 volumes</span>
-    </z-result-card>
-  `,
-};
-export const MultipleCovers = {
-    args: Object.assign(Object.assign({}, args), { hasMultipleCovers: true }),
-    render: (args) => html `
-    <z-result-card
-      .cardTitle=${args.cardTitle}
-      .cardSubtitle=${args.cardSubtitle}
-      .authors=${args.authors}
-      .cover=${args.cover}
-      fallback-cover=${args.fallbackCover}
-      .hasMultipleCovers=${args.hasMultipleCovers}
-      .isInfoCard=${args.isInfoCard}
-      .titleHtmlTag=${args.titleHtmlTag}
-    >
-      <span slot="tags">Example tag</span>
-      <span slot="tags">Example tag</span>
-      <span slot="volumes">2 volumes</span>
-    </z-result-card>
-  `,
-};
-export const MultipleCoversLateralSpaces = {
-    args: Object.assign(Object.assign({}, args), { hasMultipleCovers: true }),
-    render: (args) => html `
-    <z-result-card
-      .cardTitle=${args.cardTitle}
-      .cardSubtitle=${args.cardSubtitle}
-      .authors=${args.authors}
-      cover=https://statictestmy.zanichelli.it/catalogo/assets/small/m40003.9788808075475.jpg
-      fallback-cover=${args.fallbackCover}
-      .hasMultipleCovers=${args.hasMultipleCovers}
-      .isInfoCard=${args.isInfoCard}
-      .titleHtmlTag=${args.titleHtmlTag}
-    >
-      <span slot="tags">Example tag</span>
-      <span slot="tags">Example tag</span>
-      <span slot="volumes">2 volumes</span>
-    </z-result-card>
-  `,
-};
-export const LongTitleAndSubtitle = {
-    args: Object.assign(Object.assign({}, args), { cardTitle: "This is a very long title that should wrap to the next line if it exceeds the width of the card, it goes on two rows for desktop devices and one row for mobile", cardSubtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt maximus tellus, eget dapibus nulla blandit sed. Nullam augue ipsum, mattis sit amet diam ut, finibus posuere libero. Fusce nec erat eu risus fermentum mattis. Nunc volutpat viverra felis, eu iaculis ipsum tempus mattis. Phasellus euismod quam eget nisl pellentesque.", hasMultipleCovers: true }),
-    render: (args) => html `
-    <z-result-card
-      .cardTitle=${args.cardTitle}
-      .cardSubtitle=${args.cardSubtitle}
-      .authors=${args.authors}
-      .cover=${args.cover}
-      fallback-cover=${args.fallbackCover}
-      .hasMultipleCovers=${args.hasMultipleCovers}
-      .isInfoCard=${args.isInfoCard}
-      .titleHtmlTag=${args.titleHtmlTag}
-    >
-      <span slot="tags">Example tag</span>
-      <span slot="volumes">2 volumes</span>
-    </z-result-card>
-  `,
-};
-export const OnlyTitleAndSubtitle = {
-    args: Object.assign(Object.assign({}, args), { author: undefined }),
-    render: (args) => html `
-    <z-result-card
-      .cardTitle=${args.cardTitle}
-      .cardSubtitle=${args.cardSubtitle}
-      .cover=${args.cover}
-      fallback-cover=${args.fallbackCover}
-      .hasMultipleCovers=${args.hasMultipleCovers}
-      .isInfoCard=${args.isInfoCard}
-      .titleHtmlTag=${args.titleHtmlTag}
-    />
-  `,
-};
-export const InfoCard = {
-    args: Object.assign(Object.assign({}, args), { cardTitle: "Info Card Title", cardSubtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt maximus tellus, eget dapibus nulla blandit sed. Nullam augue ipsum, mattis sit amet diam ut, finibus posuere libero. Fusce nec erat eu risus fermentum mattis.", isInfoCard: true }),
-    render: (args) => html `
-    <z-result-card
-      .cardTitle=${args.cardTitle}
-      .cardSubtitle=${args.cardSubtitle}
-      .authors=${args.authors}
-      .cover=${args.cover}
-      fallback-cover=${args.fallbackCover}
-      .hasMultipleCovers=${args.hasMultipleCovers}
-      .isInfoCard=${args.isInfoCard}
-      .titleHtmlTag=${args.titleHtmlTag}
-    />
-  `,
-};

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

@@ -1,332 +0,0 @@
-import { html } from "lit";
-import { ButtonVariant, ControlSize } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZSearchbar",
-    component: "z-searchbar",
-    argTypes: {
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ControlSize),
-        },
-        variant: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ButtonVariant),
-        },
-    },
-    args: {
-        "preventSubmit": false,
-        "showSearchButton": false,
-        "searchButtonIconOnly": false,
-        "searchButtonLabel": "",
-        "autocomplete": false,
-        "autocompleteMinChars": 3,
-        "resultsCount": undefined,
-        "searchHelperLabel": "Cerca {searchString}",
-        "resultsItems": [{ label: "first item" }, { label: "second item" }, { label: "third item" }, { label: "fourth item" }],
-        "sortResultsItems": false,
-        "htmlid": "myId",
-        "placeholder": "my placeholder",
-        "value": "",
-        "label": "",
-        "htmlAriaLabel": "",
-        "--z-searchbar-results-height": "540px",
-        "--z-searchbar-tag-text-color": "var(--color-primary03)",
-        "--z-searchbar-tag-bg": "var(--color-hover-primary)",
-        "size": ControlSize.BIG,
-        "variant": ButtonVariant.PRIMARY,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-searchbar
-      prevent-submit=${args.preventSubmit}
-      show-search-button=${args.showSearchButton}
-      search-button-label=${args.searchButtonLabel}
-      search-button-icon-only=${args.searchButtonIconOnly}
-      autocomplete=${args.autocomplete}
-      autocomplete-min-chars=${args.autocompleteMinChars}
-      results-count=${args.resultsCount}
-      search-helper-label=${args.searchHelperLabel}
-      results-items=${JSON.stringify(args.resultsItems)}
-      sort-results-items=${JSON.stringify(args.sortResultsItems)}
-      value=${args.value}
-      placeholder=${args.placeholder}
-      htmlid=${args.htmlid}
-      style="--z-searchbar-results-height: ${args["--z-searchbar-results-height"]}"
-      size=${args.size}
-      variant=${args.variant}
-      label=${args.label}
-      html-aria-label=${args.htmlAriaLabel}
-    ></z-searchbar>
-  `,
-};
-export const SimpleSearch = {
-    parameters: {
-        controls: {
-            include: ["value", "placeholder", "htmlid", "size", "label", "htmlAriaLabel"],
-        },
-    },
-    args: {
-        htmlid: "myIdSimple",
-    },
-    render: (args) => html `
-    <z-searchbar
-      prevent-submit="false"
-      show-search-button=${args.showSearchButton}
-      search-button-icon-only=${args.searchButtonIconOnly}
-      search-button-label=${args.searchButtonLabel}
-      autcomplete="false"
-      value=${args.value}
-      placeholder=${args.placeholder}
-      htmlid=${args.htmlid}
-      size=${args.size}
-      label=${args.label}
-      html-aria-label=${args.htmlAriaLabel}
-    ></z-searchbar>
-  `,
-};
-export const Autocomplete = {
-    args: {
-        autocomplete: true,
-        htmlid: "myIdAutocomplete",
-        showSearchButton: false,
-        searchButtonIconOnly: false,
-        searchButtonLabel: "Cliccami",
-    },
-    render: (args) => html `
-    <z-searchbar
-      prevent-submit=${args.preventSubmit}
-      show-search-button=${args.showSearchButton}
-      search-button-icon-only=${args.searchButtonIconOnly}
-      search-button-label=${args.searchButtonLabel}
-      autocomplete=${args.autocomplete}
-      autocomplete-min-chars=${args.autocompleteMinChars}
-      results-count=${args.resultsCount}
-      search-helper-label=${args.searchHelperLabel}
-      results-items=${JSON.stringify(args.resultsItems)}
-      sort-results-items=${JSON.stringify(args.sortResultsItems)}
-      value=${args.value}
-      placeholder=${args.placeholder}
-      htmlid=${args.htmlid}
-      style="--z-searchbar-results-height: ${args["--z-searchbar-results-height"]}"
-      size=${args.size}
-      variant=${args.variant}
-      label=${args.label}
-      html-aria-label=${args.htmlAriaLabel}
-    ></z-searchbar>
-  `,
-};
-export const AutocompleteWithComplexItems = {
-    args: {
-        autocomplete: true,
-        htmlid: "myIdGroupedAutocomplete",
-        showSearchButton: false,
-        searchButtonIconOnly: false,
-        searchButtonLabel: "Cliccami",
-        resultsItems: [
-            {
-                label: "first item",
-                icon: "download",
-                tag: {
-                    text: "Riservato all'insegnante",
-                    icon: "teacher",
-                },
-                category: "Category A",
-                subcategory: "Subcategory A1",
-            },
-            {
-                label: "second item",
-                icon: "collezioni",
-                category: "Category B",
-                subcategory: "Subcategory B1",
-            },
-            {
-                label: "third item",
-                icon: "dictonary",
-                category: "Category A",
-                subcategory: "Subcategory A2",
-            },
-            {
-                label: "fourth item",
-                icon: "exercises-online",
-                category: "Category A",
-                subcategory: "Subcategory A1",
-            },
-            {
-                label: "fifth item",
-                icon: "interactives-maps",
-                category: "Category A",
-                subcategory: "Subcategory A1",
-            },
-            {
-                label: "sixth item",
-                icon: "textual-analysis",
-                category: "Category B",
-                subcategory: "Subcategory B1",
-            },
-        ],
-    },
-    render: (args) => html `
-    <z-searchbar
-      prevent-submit=${args.preventSubmit}
-      show-search-button=${args.showSearchButton}
-      search-button-icon-only=${args.searchButtonIconOnly}
-      search-button-label=${args.searchButtonLabel}
-      autocomplete=${args.autocomplete}
-      autocomplete-min-chars=${args.autocompleteMinChars}
-      results-count=${args.resultsCount}
-      search-helper-label=${args.searchHelperLabel}
-      results-items=${JSON.stringify(args.resultsItems)}
-      sort-results-items=${JSON.stringify(args.sortResultsItems)}
-      value=${args.value}
-      placeholder=${args.placeholder}
-      htmlid=${args.htmlid}
-      style="--z-searchbar-results-height: ${args["--z-searchbar-results-height"]}; --z-searchbar-tag-text-color: ${args["--z-searchbar-tag-text-color"]}; --z-searchbar-tag-bg: ${args["--z-searchbar-tag-bg"]}"
-      size=${args.size}
-      variant=${args.variant}
-      label=${args.label}
-      html-aria-label=${args.htmlAriaLabel}
-    ></z-searchbar>
-  `,
-};
-export const AutocompleteWithComplexTreeItems = {
-    args: {
-        autocomplete: true,
-        htmlid: "myIdGroupedAutocomplete",
-        showSearchButton: false,
-        searchButtonIconOnly: false,
-        searchButtonLabel: "Cliccami",
-        resultsItems: [
-            {
-                label: "first item",
-                icon: "download",
-                tag: {
-                    text: "Riservato all'insegnante",
-                    icon: "teacher",
-                },
-                category: "Category A",
-                subcategory: "Subcategory A1",
-                children: [
-                    {
-                        label: "first item - first child",
-                        icon: "download",
-                        tag: {
-                            text: "Riservato all'insegnante",
-                            icon: "teacher",
-                        },
-                        children: [
-                            {
-                                label: "first item - first child - first child lunghissssssssssssssss sssssssssssssssssss ssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssimo",
-                                icon: "download",
-                                tag: {
-                                    text: "Riservato all'insegnante",
-                                    icon: "teacher",
-                                },
-                            },
-                            {
-                                label: "first item - first child - second child",
-                                icon: "download",
-                                tag: {
-                                    text: "Riservato all'insegnante",
-                                    icon: "teacher",
-                                },
-                            },
-                            {
-                                label: "first item - first child - third child",
-                                icon: "download",
-                                tag: {
-                                    text: "Riservato all'insegnante",
-                                    icon: "teacher",
-                                },
-                            },
-                        ],
-                    },
-                    {
-                        label: "first item - second child",
-                        icon: "download",
-                        tag: {
-                            text: "Riservato all'insegnante",
-                            icon: "teacher",
-                        },
-                    },
-                ],
-            },
-            {
-                label: "second item",
-                icon: "collezioni",
-                category: "Category B",
-                subcategory: "Subcategory B1",
-            },
-            {
-                label: "third item",
-                icon: "dictonary",
-                category: "Category A",
-                subcategory: "Subcategory A2",
-            },
-            {
-                label: "fourth item",
-                icon: "exercises-online",
-                category: "Category A",
-                subcategory: "Subcategory A1",
-            },
-            {
-                label: "fifth item",
-                icon: "interactives-maps",
-                category: "Category A",
-                subcategory: "Subcategory A1",
-                children: [
-                    {
-                        label: "fifth item - first child",
-                        icon: "download",
-                        tag: {
-                            text: "Riservato all'insegnante",
-                            icon: "teacher",
-                        },
-                    },
-                    {
-                        label: "fifth item - second child",
-                        icon: "download",
-                        tag: {
-                            text: "Riservato all'insegnante",
-                            icon: "teacher",
-                        },
-                    },
-                ],
-            },
-            {
-                label: "sixth item",
-                icon: "textual-analysis",
-                category: "Category B",
-                subcategory: "Subcategory B1",
-            },
-        ],
-    },
-    render: (args) => html `
-    <z-searchbar
-      prevent-submit=${args.preventSubmit}
-      show-search-button=${args.showSearchButton}
-      search-button-icon-only=${args.searchButtonIconOnly}
-      search-button-label=${args.searchButtonLabel}
-      autocomplete=${args.autocomplete}
-      autocomplete-min-chars=${args.autocompleteMinChars}
-      results-count=${args.resultsCount}
-      search-helper-label=${args.searchHelperLabel}
-      results-items=${JSON.stringify(args.resultsItems)}
-      sort-results-items=${JSON.stringify(args.sortResultsItems)}
-      value=${args.value}
-      placeholder=${args.placeholder}
-      htmlid=${args.htmlid}
-      style="--z-searchbar-results-height: ${args["--z-searchbar-results-height"]}; --z-searchbar-tag-text-color: ${args["--z-searchbar-tag-text-color"]}; --z-searchbar-tag-bg: ${args["--z-searchbar-tag-bg"]}"
-      size=${args.size}
-      variant=${args.variant}
-      label=${args.label}
-      html-aria-label=${args.htmlAriaLabel}
-    ></z-searchbar>
-  `,
-};