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

package/dist/collection/components/file-upload/z-file-upload/index.stories.js

@@ -1,139 +0,0 @@
-import { html } from "lit";
-import { ButtonVariant, ZFileUploadType } from "../../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZFileUpload",
-    component: "z-file-upload",
-    argTypes: {
-        type: {
-            options: Object.values(ZFileUploadType),
-            control: {
-                type: "inline-radio",
-            },
-        },
-        buttonVariant: {
-            options: Object.values(ButtonVariant),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    args: {
-        fileMaxSize: 50,
-        acceptedFormat: ".pdf, .doc, .tiff, .png, .jpg",
-        mainTitle: "Allega un file",
-        description: "Vuoi allegare un file per chiarire meglio la tua richiesta?",
-        uploadBtnLabel: "allega",
-        hasFileSection: true,
-        showErrors: true,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    args: {
-        buttonVariant: ButtonVariant.PRIMARY,
-    },
-    render: (args) => html `<h4 class="heading-4">
-        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before
-        using it!
-      </h4>
-      <z-file-upload
-        type=${ZFileUploadType.DEFAULT}
-        .showErrors=${args.showErrors}
-        .hasFileSection=${args.hasFileSection}
-        description="${args.description}"
-        .buttonVariant=${args.buttonVariant}
-        .fileMaxSize=${args.fileMaxSize}
-        .acceptedFormat=${args.acceptedFormat}
-        .mainTitle=${args.mainTitle}
-        .uploadBtnLabel=${args.uploadBtnLabel}
-      />
-      <script>
-        fileNumber = 0;
-        document.addEventListener("fileInput", (e) => {
-          fileNumber++;
-          const item = e.detail;
-          const chip = document.createElement("Z-FILE");
-          chip.setAttribute("slot", "files");
-          chip.setAttribute("file-number", fileNumber);
-          chip.setAttribute("file-name", item.name);
-          document.querySelector("z-file-upload")?.appendChild(chip);
-        });
-      </script>`,
-};
-export const Dragdrop = {
-    args: {
-        dragAndDropLabel: "Rilascia i file in questa area per allegarli.",
-    },
-    render: (args) => html `<h4 class="heading-4">
-        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before
-        using it!
-      </h4>
-      <br />
-      <z-file-upload
-        type=${ZFileUploadType.DRAGDROP}
-        .showErrors=${args.showErrors}
-        .hasFileSection=${args.hasFileSection}
-        description="${args.description}"
-        .fileMaxSize=${args.fileMaxSize}
-        .acceptedFormat=${args.acceptedFormat}
-        .mainTitle=${args.mainTitle}
-        .dragAndDropLabel=${args.dragAndDropLabel}
-      />
-      <script>
-        document.addEventListener("fileInput", (e) => {
-          const item = e.detail;
-          const chip = document.createElement("Z-FILE");
-          chip.setAttribute("slot", "files");
-          chip.setAttribute("filetype", item.type);
-          chip.setAttribute("file-name", item.name);
-          document.querySelector("z-file-upload")?.appendChild(chip);
-        });
-      </script>`,
-};
-export const DragdropEnglish = {
-    args: {
-        mainTitle: "Attach a file",
-        description: "Do you want to attach a file to clarify your request?",
-        uploadBtnLabel: "Attach",
-        dragAndDropLabel: "Drop the image here",
-        allowedFilesMessage: "You can upload files in the format PDF, DOC, TIFF, PNG, JPG for a maximum of 50MB",
-        uploadClickableMessage: "Load",
-        uploadMessage: "or drag from your computer",
-        errorModalTitle: "Loading error",
-        errorModalMessage: "The file does not respect the allowed parameters.",
-        uploadedFilesLabel: "Uploaded files",
-    },
-    render: (args) => html `<h4 class="heading-4">
-        This story embeds a piece of js script to allow the component to work properly. Please refresh the page before
-        using it!
-      </h4>
-      <br />
-      <z-file-upload
-        type=${ZFileUploadType.DRAGDROP}
-        .showErrors=${args.showErrors}
-        .hasFileSection=${args.hasFileSection}
-        description="${args.description}"
-        .fileMaxSize=${args.fileMaxSize}
-        .acceptedFormat=${args.acceptedFormat}
-        .mainTitle=${args.mainTitle}
-        .dragAndDropLabel=${args.dragAndDropLabel}
-        .allowedFilesMessage=${args.allowedFilesMessage}
-        .uploadClickableMessage=${args.uploadClickableMessage}
-        .uploadMessage=${args.uploadMessage}
-        .errorModalTitle=${args.errorModalTitle}
-        .errorModalMessage=${args.errorModalMessage}
-        .uploadedFilesLabel=${args.uploadedFilesLabel}
-        .uploadBtnLabel=${args.uploadBtnLabel}
-      />
-      <script>
-        document.addEventListener("fileInput", (e) => {
-          const item = e.detail;
-          const chip = document.createElement("Z-FILE");
-          chip.setAttribute("slot", "files");
-          chip.setAttribute("filetype", item.type);
-          chip.setAttribute("file-name", item.name);
-          document.querySelector("z-file-upload")?.appendChild(chip);
-        });
-      </script>`,
-};

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

@@ -1,184 +0,0 @@
-import { html } from "lit";
-import { ListSize, ListType } from "../../../beans";
-import "../z-list-element/index";
-import "../z-list-group/index";
-import "./index";
-const StoryMeta = {
-    title: "ZList/ZList",
-    component: "z-list",
-    argTypes: {
-        size: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ListSize),
-        },
-        listType: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ListType),
-        },
-    },
-    args: {
-        size: ListSize.MEDIUM,
-        listType: ListType.NONE,
-    },
-    render: (args) => html `
-    <z-list
-      .listType=${args.listType}
-      size=${args.size}
-    >
-      <z-list-element
-        .listType=${args.listType}
-        size=${args.size}
-        >Elemento 1</z-list-element
-      >
-      <z-list-element
-        .listType=${args.listType}
-        size=${args.size}
-        >Elemento 2</z-list-element
-      >
-      <z-list-element
-        .listType=${args.listType}
-        size=${args.size}
-        >Elemento 3</z-list-element
-      >
-    </z-list>
-  `,
-};
-export default StoryMeta;
-export const Default = {};
-export const HeaderDivider = {
-    render: (args) => html `<z-list>
-      <z-list-group divider-type="header">
-        <div slot="header-title">Gruppo 1</div>
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-      <z-list-group divider-type="header">
-        <div slot="header-title">Gruppo 2</div>
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-    </z-list>`,
-};
-export const ElementDivider = {
-    render: (args) => html `<z-list>
-      <z-list-group divider-type="element">
-        <div slot="header-title">Gruppo 1</div>
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-      <z-list-group divider-type="element">
-        <div slot="header-title">Gruppo 2</div>
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          .listType=${args.listType}
-          size=${args.size}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-    </z-list>`,
-};
-export const ClickableElements = {
-    render: () => html `<z-list>
-      <z-list-group>
-        <z-list-element clickable>Elemento 1</z-list-element>
-        <z-list-element clickable>Elemento 2</z-list-element>
-        <z-list-element clickable>Elemento 3</z-list-element>
-      </z-list-group>
-    </z-list>`,
-};
-export const ExpandableElements = {
-    render: () => html `<z-list size="large">
-      <z-list-group divider-type="element">
-        <z-list-element
-          expandable
-          align-button="left"
-          expandable-style="accordion"
-          ><span>Elemento 1</span><span slot="inner-content">INNER CONTENT 1 BUTTON LEFT</span></z-list-element
-        >
-        <z-list-element
-          expandable
-          align-button="right"
-          expandable-style="menu"
-          ><span>Elemento 2</span><span slot="inner-content">INNER CONTENT 2</span></z-list-element
-        >
-        <z-list-element
-          expandable
-          align-button="right"
-          expandable-style="menu"
-          ><span>Elemento 3</span><span slot="inner-content">INNER CONTENT 3</span></z-list-element
-        >
-      </z-list-group>
-    </z-list>`,
-};
-export const UnorderedIndex = {
-    parameters: {
-        controls: {
-            exclude: ["size", "listType"],
-        },
-    },
-    args: {
-        listType: ListType.UNORDERED,
-    },
-};
-export const OrderedIndex = {
-    parameters: {
-        controls: {
-            exclude: ["size", "listType"],
-        },
-    },
-    args: {
-        listType: ListType.ORDERED,
-    },
-};

package/dist/collection/components/list/z-list-element/index.stories.js

@@ -1,127 +0,0 @@
-import { html } from "lit";
-import { DividerSize, ExpandableListButtonAlign, ExpandableListStyle, ListDividerType, ListSize, ListType, } from "../../../beans";
-import { getColorTokens } from "../../../utils/storybook-utils";
-import "../z-list/index";
-import "./index";
-const StoryMeta = {
-    title: "ZList/ZListElement",
-    component: "z-list-element",
-    argTypes: {
-        alignButton: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ExpandableListButtonAlign),
-        },
-        dividerColor: {
-            control: {
-                type: "select",
-            },
-            options: getColorTokens().map((token) => token.replace("--", "")),
-        },
-        dividerType: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListDividerType),
-        },
-        dividerSize: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(DividerSize),
-        },
-        expandableStyle: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ExpandableListStyle),
-        },
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListSize),
-        },
-        color: {
-            control: {
-                type: "select",
-            },
-            options: getColorTokens().map((token) => token.replace("--", "")),
-        },
-        listType: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListType),
-        },
-    },
-    args: {
-        alignButton: ExpandableListButtonAlign.LEFT,
-        clickable: false,
-        dividerColor: "color-surface03",
-        dividerType: ListDividerType.NONE,
-        dividerSize: DividerSize.SMALL,
-        expandable: false,
-        expandableStyle: ExpandableListStyle.ACCORDION,
-        listElementId: 0,
-        size: ListSize.MEDIUM,
-        color: "color-default-text",
-        disabled: true,
-        listElementPosition: "0",
-        listType: ListType.NONE,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-list>
-      <z-list-element
-        align-button=${args.alignButton}
-        .clickable=${args.clickable}
-        divider-color=${args.dividerColor}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        .expandable=${args.expandable}
-        expandable-style=${args.expandableStyle}
-        list-element-id=${args.listElementId}
-        size=${args.size}
-        color=${args.color}
-        .disabled=${args.disabled}
-        list-element-position=${args.listElementPosition}
-        list-type=${args.listType}
-        ><span>Elemento 1</span><span slot="inner-content">Inner content</span></z-list-element
-      >
-      <z-list-element
-        align-button=${args.alignButton}
-        .clickable=${args.clickable}
-        divider-color=${args.dividerColor}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        .expandable=${args.expandable}
-        expandable-style=${args.expandableStyle}
-        list-element-id=${args.listElementId}
-        size=${args.size}
-        color=${args.color}
-        .disabled=${args.disabled}
-        list-element-position=${args.listElementPosition}
-        list-type=${args.listType}
-        >Elemento 2</z-list-element
-      >
-      <z-list-element
-        align-button=${args.alignButton}
-        .clickable=${args.clickable}
-        divider-color=${args.dividerColor}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        .expandable=${args.expandable}
-        expandable-style=${args.expandableStyle}
-        list-element-id=${args.listElementId}
-        size=${args.size}
-        color=${args.color}
-        .disabled=${args.disabled}
-        list-element-position=${args.listElementPosition}
-        list-type=${args.listType}
-        >Elemento 3</z-list-element
-      >
-    </z-list>`,
-};

package/dist/collection/components/list/z-list-group/index.stories.js

@@ -1,120 +0,0 @@
-import { html } from "lit";
-import { DividerSize, ListDividerType, ListSize, ListType } from "../../../beans";
-import { getColorTokenArgConfig } from "../../../utils/storybook-utils";
-import "../z-list-element/index";
-import "../z-list/index";
-import "./index";
-const StoryMeta = {
-    title: "ZList/ZListGroup",
-    component: "z-list-group",
-    argTypes: {
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListSize),
-        },
-        dividerType: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListDividerType),
-        },
-        dividerSize: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(DividerSize),
-        },
-        dividerColor: getColorTokenArgConfig(),
-        listType: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ListType),
-        },
-    },
-    args: {
-        size: ListSize.SMALL,
-        dividerType: ListDividerType.HEADER,
-        dividerSize: DividerSize.SMALL,
-        dividerColor: "gray200",
-        listType: ListType.NONE,
-        role: "group",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-list>
-      <z-list-group
-        size=${args.size}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        divider-color=${args.dividerColor}
-        list-type=${args.listType}
-        role=${args.role}
-      >
-        <div slot="header-title">Gruppo 1</div>
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-      <z-list-group
-        size=${args.size}
-        divider-type=${args.dividerType}
-        divider-size=${args.dividerSize}
-        divider-color=${args.dividerColor}
-        list-type=${args.listType}
-        role=${args.role}
-      >
-        <div slot="header-title">Gruppo 1</div>
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 1</z-list-element
-        >
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 2</z-list-element
-        >
-        <z-list-element
-          size=${args.size}
-          list-type=${args.listType}
-          divider-type=${args.dividerType}
-          divider-size=${args.dividerSize}
-          divider-color=${args.dividerColor}
-          >Elemento 3</z-list-element
-        >
-      </z-list-group>
-    </z-list>
-  `,
-};

package/dist/collection/components/list/z-tree-list/index.stories.js

@@ -1,119 +0,0 @@
-import { html } from "lit";
-import "./index";
-const sampleItems = [
-    {
-        name: "Parent 1",
-        icon: "folder",
-        children: [
-            {
-                name: "Child 1.1",
-                icon: "book",
-            },
-            {
-                name: "Child 1.2",
-                icon: "book",
-            },
-        ],
-    },
-    {
-        name: "Parent 2",
-        icon: "folder",
-        children: [
-            {
-                name: "Child 2.1",
-                icon: "book",
-            },
-        ],
-    },
-];
-const clickableItems = [
-    {
-        name: "Parent 1",
-        icon: "folder",
-        url: "#",
-        children: [
-            {
-                name: "Child 1.1",
-                icon: "book",
-                url: "#",
-            },
-            {
-                name: "Child 1.2",
-                icon: "book",
-                url: "#",
-            },
-        ],
-    },
-    {
-        name: "Parent 2",
-        icon: "folder",
-        url: "#",
-        children: [
-            {
-                name: "Child 2.1",
-                icon: "book",
-                url: "#",
-            },
-        ],
-    },
-];
-const boldItems = [
-    {
-        name: "Parent 1",
-        icon: "folder",
-        bold: true,
-        children: [
-            {
-                name: "Child 1.1",
-                icon: "book",
-            },
-            {
-                name: "Child 1.2",
-                icon: "book",
-            },
-        ],
-    },
-    {
-        name: "Parent 2",
-        icon: "folder",
-        bold: true,
-        children: [
-            {
-                name: "Child 2.1",
-                icon: "book",
-            },
-        ],
-    },
-];
-const StoryMeta = {
-    title: "ZList/ZTreeList",
-    component: "z-tree-list",
-    argTypes: {
-        items: { control: "object" },
-    },
-    args: {
-        items: sampleItems,
-    },
-};
-export default StoryMeta;
-const Template = (args) => {
-    return html `<z-tree-list items=${JSON.stringify(args.items)}></z-tree-list>`;
-};
-export const Base = {
-    args: {
-        items: sampleItems,
-    },
-    render: Template,
-};
-export const Bold = {
-    args: {
-        items: boldItems,
-    },
-    render: Template,
-};
-export const Clickable = {
-    args: {
-        items: clickableItems,
-    },
-    render: Template,
-};