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

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

@@ -1,359 +0,0 @@
-import { html } from "lit";
-import { ControlSize, InputStatus } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZSelect",
-    component: "z-select",
-    argTypes: {
-        items: {
-            control: {
-                type: "object",
-            },
-        },
-        status: {
-            control: {
-                type: "select",
-                labels: {
-                    null: "-",
-                },
-            },
-            options: [null, ...Object.values(InputStatus)],
-        },
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ControlSize),
-        },
-    },
-    args: {
-        items: [
-            {
-                id: "item_1",
-                name: "item_1",
-                selected: false,
-            },
-            {
-                id: "item_2",
-                name: "item_2",
-                selected: true,
-            },
-            {
-                id: "item_3",
-                name: "item_3",
-                selected: false,
-                disabled: true,
-            },
-            {
-                id: "item_4",
-                name: "item_4",
-                selected: false,
-            },
-        ],
-        label: "this is the label",
-        ariaLabel: "",
-        placeholder: "select placeholder",
-        status: null,
-        message: "helper text",
-        size: ControlSize.BIG,
-        name: "select-name",
-        disabled: false,
-        readonly: false,
-        htmlid: "",
-        htmltitle: "",
-        autocomplete: false,
-        noresultslabel: "Nessun risultato",
-        hasGroupItems: false,
-        hasTreeItems: false,
-        resetItem: "",
-        isfixed: false,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-select
-      items=${JSON.stringify(args.items)}
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      placeholder=${args.placeholder}
-      name=${args.name}
-      status=${args.status}
-      message=${args.message}
-      autocomplete=${args.autocomplete}
-      noresultslabel=${args.noresultslabel}
-      disabled=${args.disabled}
-      readonly=${args.readonly}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      reset-item=${args.resetItem}
-      isfixed=${args.isfixed}
-      size=${args.size}
-    ></z-select>
-  `,
-};
-export const Groups = {
-    args: {
-        hasGroupItems: true,
-        items: [
-            {
-                id: "item_1",
-                name: "item_1",
-                selected: false,
-                category: "Gruppo 1",
-            },
-            {
-                id: "item_2",
-                name: "item_2",
-                selected: false,
-                category: "Gruppo 1",
-            },
-            {
-                id: "item_3",
-                name: "item_3",
-                selected: false,
-                category: "Gruppo 2",
-                disabled: true,
-            },
-            {
-                id: "item_4",
-                name: "item_4",
-                selected: false,
-                category: "Gruppo 2",
-            },
-            {
-                id: "item_5",
-                name: "item_5",
-                selected: false,
-                category: "Gruppo 3",
-                disabled: true,
-            },
-            {
-                id: "item_6",
-                name: "item_6",
-                selected: false,
-                category: "Gruppo 3",
-            },
-        ],
-    },
-    render: (args) => html `
-    <z-select
-      items=${JSON.stringify(args.items)}
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      placeholder=${args.placeholder}
-      name=${args.name}
-      status=${args.status}
-      message=${args.message}
-      autocomplete=${args.autocomplete}
-      noresultslabel=${args.noresultslabel}
-      disabled=${args.disabled}
-      readonly=${args.readonly}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      .hasGroupItems=${args.hasGroupItems}
-      reset-item=${args.resetItem}
-      isfixed=${args.isfixed}
-      size=${args.size}
-    ></z-select>
-  `,
-};
-export const ZSelectWithIcons = {
-    args: {
-        hasGroupItems: true,
-        items: [
-            {
-                id: "item_1",
-                name: "item_1",
-                selected: false,
-                icon: "teacher",
-            },
-            {
-                id: "item_2",
-                name: "item_2",
-                selected: false,
-                icon: "teacher",
-            },
-            {
-                id: "item_3",
-                name: "item_3",
-                selected: false,
-                disabled: true,
-                icon: "teacher",
-            },
-        ],
-    },
-    render: (args) => html `
-    <z-select
-      items=${JSON.stringify(args.items)}
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      placeholder=${args.placeholder}
-      name=${args.name}
-      status=${args.status}
-      message=${args.message}
-      autocomplete=${args.autocomplete}
-      noresultslabel=${args.noresultslabel}
-      disabled=${args.disabled}
-      readonly=${args.readonly}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      reset-item=${args.resetItem}
-      isfixed=${args.isfixed}
-      size=${args.size}
-    ></z-select>
-  `,
-};
-export const ZSelectWithTreeItems = {
-    args: {
-        hasTreeItems: true,
-        hasGroupItems: false,
-        items: [
-            {
-                id: "padre",
-                name: "Padre",
-                selected: false,
-                category: "Sezione",
-                children: [
-                    {
-                        id: "figlio1aa",
-                        name: "Figlio",
-                        selected: false,
-                        children: [],
-                    },
-                    {
-                        id: "figlio1b",
-                        name: "Figlio 2",
-                        selected: false,
-                    },
-                ],
-            },
-            {
-                id: "padre3",
-                name: "Padre 3",
-                selected: false,
-                category: "Altra sezione",
-                children: [
-                    {
-                        id: "figlio3a",
-                        name: "Figlio 3A",
-                        selected: false,
-                        children: [
-                            {
-                                id: "nipote3a-1",
-                                name: "Nipote 3A-1",
-                                selected: false,
-                            },
-                        ],
-                    },
-                ],
-            },
-        ],
-    },
-    render: (args) => html `
-    <z-select
-      items=${JSON.stringify(args.items)}
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      placeholder=${args.placeholder}
-      name=${args.name}
-      status=${args.status}
-      message=${args.message}
-      autocomplete=${args.autocomplete}
-      noresultslabel=${args.noresultslabel}
-      disabled=${args.disabled}
-      readonly=${args.readonly}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      reset-item=${args.resetItem}
-      isfixed=${args.isfixed}
-      size=${args.size}
-      .hasTreeItems=${args.hasTreeItems}
-    ></z-select>
-  `,
-};
-export const ZSelectWithGroupsAndTreeItems = {
-    args: {
-        hasTreeItems: true,
-        hasGroupItems: true,
-        showChildrenOfMatchingParent: false,
-        items: [
-            {
-                id: "padreA",
-                name: "Padre A",
-                selected: false,
-                category: "Sezione",
-                children: [
-                    {
-                        id: "figlioA1",
-                        name: "Figlio A1",
-                        selected: false,
-                        children: [],
-                    },
-                    {
-                        id: "figlioA2",
-                        name: "Figlio A2",
-                        selected: false,
-                    },
-                ],
-            },
-            {
-                id: "padreB",
-                name: "Padre B",
-                selected: false,
-                category: "Altra sezione",
-                children: [
-                    {
-                        id: "figlioB1",
-                        name: "Figlio B1",
-                        selected: false,
-                        children: [
-                            {
-                                id: "nipoteB1",
-                                name: "Nipote B1",
-                                selected: false,
-                                children: [
-                                    {
-                                        id: "pronipoteB1",
-                                        name: "Pronipote B1",
-                                        selected: false,
-                                    },
-                                ],
-                            },
-                        ],
-                    },
-                ],
-            },
-            {
-                id: "altro",
-                name: "Altro",
-                selected: false,
-                category: "Altra sezione",
-                children: [],
-            },
-        ],
-    },
-    render: (args) => html `
-    <z-select
-      items=${JSON.stringify(args.items)}
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      placeholder=${args.placeholder}
-      name=${args.name}
-      status=${args.status}
-      message=${args.message}
-      autocomplete=${args.autocomplete}
-      noresultslabel=${args.noresultslabel}
-      disabled=${args.disabled}
-      readonly=${args.readonly}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      reset-item=${args.resetItem}
-      isfixed=${args.isfixed}
-      size=${args.size}
-      .hasGroupItems=${args.hasGroupItems}
-      .hasTreeItems=${args.hasTreeItems}
-      .showChildrenOfMatchingParent=${args.showChildrenOfMatchingParent}
-    ></z-select>
-  `,
-};

package/dist/collection/components/z-skip-to-content/index.stories.js

@@ -1,40 +0,0 @@
-import { html } from "lit";
-import { ThemeVariant } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZSkipToContent",
-    component: "z-skip-to-content",
-    argTypes: {
-        variant: {
-            options: Object.values(ThemeVariant),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-};
-export default StoryMeta;
-export const Default = {
-    args: {
-        variant: ThemeVariant.LIGHT,
-        links: [
-            {
-                ariaLabel: "prova",
-                label: "vai al link1",
-                href: "#link1",
-            },
-            {
-                label: "vai al link2",
-                href: "#link2",
-            },
-            {
-                label: "vai al link3",
-                href: "#link3",
-            },
-        ],
-    },
-    render: (args) => html `<z-skip-to-content
-      variant=${args.variant}
-      links=${JSON.stringify(args.links)}
-    ></z-skip-to-content>`,
-};

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

@@ -1,108 +0,0 @@
-import { html } from "lit";
-import "../z-stepper-item/index";
-import "./index";
-export default {
-    title: "ZStepper/ZStepper",
-    component: "z-stepper",
-    decorators: [(Story) => html `<div class="z-carousel-story-container">${Story()}</div>`],
-    subcomponents: {
-        ZStepperItem: "z-stepper-item",
-    },
-};
-export const Default = {
-    render: () => html `<script>
-        const onClick = (elem) => {
-          if (!elem.disabled) {
-            elem.setAttribute("pressed", "");
-            Array.from(document.querySelectorAll("z-stepper-item")).forEach((s) => {
-              if (s === elem) {
-                return;
-              }
-              s.pressed = false;
-              s.removeAttribute("pressed");
-            });
-          }
-        };
-      </script>
-      <z-stepper>
-        <z-stepper-item
-          index="1"
-          pressed
-          href="#"
-          onclick="onClick(this)"
-          >I tuoi dati</z-stepper-item
-        >
-        <z-stepper-item
-          index="2"
-          href="#"
-          onclick="onClick(this)"
-          >Le tue credenziali</z-stepper-item
-        >
-        <z-stepper-item
-          index="3"
-          href="#"
-          onclick="onClick(this)"
-          >Conferma</z-stepper-item
-        >
-      </z-stepper>`,
-};
-export const Completed = {
-    render: () => html `<z-stepper>
-      <z-stepper-item
-        index="1"
-        href="#"
-        disabled
-        >I tuoi dati</z-stepper-item
-      >
-      <z-stepper-item
-        index="2"
-        href="#"
-        disabled
-        >Le tue credenziali</z-stepper-item
-      >
-      <z-stepper-item
-        index="3"
-        href="#"
-        pressed
-        >Conferma</z-stepper-item
-      >
-    </z-stepper>`,
-};
-export const CompletedDisabled = {
-    render: () => html `<z-stepper>
-      <z-stepper-item
-        index="1"
-        disabled
-        >I tuoi dati</z-stepper-item
-      >
-      <z-stepper-item
-        index="2"
-        disabled
-        >Le tue credenziali</z-stepper-item
-      >
-      <z-stepper-item
-        index="3"
-        pressed
-        >Conferma</z-stepper-item
-      >
-    </z-stepper>`,
-};
-export const Checked = {
-    render: () => html `<z-stepper>
-      <z-stepper-item
-        index="1"
-        checked
-        >I tuoi dati</z-stepper-item
-      >
-      <z-stepper-item
-        index="2"
-        checked
-        >Le tue credenziali</z-stepper-item
-      >
-      <z-stepper-item
-        index="3"
-        checked
-        >Conferma</z-stepper-item
-      >
-    </z-stepper>`,
-};

package/dist/collection/components/z-stepper-item/index.stories.js

@@ -1,58 +0,0 @@
-import { html } from "lit";
-import "./index";
-export default {
-    title: "ZStepper/ZStepperItem",
-    component: "z-stepper-item",
-    args: {
-        pressed: false,
-        disabled: false,
-        checked: false,
-        index: 1,
-        text: "First Item",
-    },
-};
-export const Default = {
-    render: (args) => html `<z-stepper-item
-      index=${args.index}
-      ?pressed=${args.pressed}
-      ?disabled=${args.disabled}
-      ?checked=${args.checked}
-      >${args.text}</z-stepper-item
-    >`,
-};
-export const Pressed = {
-    args: {
-        pressed: true,
-    },
-    render: (args) => html `<z-stepper-item
-      index=${args.index}
-      ?pressed=${args.pressed}
-      ?disabled=${args.disabled}
-      ?checked=${args.checked}
-      >${args.text}</z-stepper-item
-    >`,
-};
-export const Disabled = {
-    args: {
-        disabled: true,
-    },
-    render: (args) => html `<z-stepper-item
-      index=${args.index}
-      ?pressed=${args.pressed}
-      ?disabled=${args.disabled}
-      ?checked=${args.checked}
-      >${args.text}</z-stepper-item
-    >`,
-};
-export const Checked = {
-    args: {
-        checked: true,
-    },
-    render: (args) => html `<z-stepper-item
-      index=${args.index}
-      ?pressed=${args.pressed}
-      ?disabled=${args.disabled}
-      ?checked=${args.checked}
-      >${args.text}</z-stepper-item
-    >`,
-};

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

@@ -1,63 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { ICONS } from "../../constants/iconset";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "./index";
-const StoryMeta = {
-    title: "ZTag",
-    component: "z-tag",
-    argTypes: {
-        "icon": {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(ICONS).sort(),
-        },
-        "--z-tag-text-color": getColorTokenArgConfig(),
-        "--z-tag-bg": getColorTokenArgConfig(),
-    },
-    args: {
-        text: "In progress",
-        expandable: false,
-        icon: "gear",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-tag
-      icon=${args.icon}
-      expandable=${args.expandable}
-      >${args.text}
-    </z-tag>`,
-};
-export const ColorTokens = {
-    args: {
-        "--z-tag-text-color": null,
-        "--z-tag-bg": null,
-    },
-    render: (args) => html `<z-tag
-      style=${styleMap({
-        "--z-tag-text-color": args["--z-tag-text-color"],
-        "--z-tag-bg": args["--z-tag-bg"],
-    })}
-      .icon=${args.icon}
-      .expandable=${args.expandable}
-      >${args.text}
-    </z-tag>`,
-};
-export const LongText = {
-    args: {
-        "text": "In progress testo lungo molto lungo lungo lungo lungo lungolungo lungolungo",
-        "--z-tag-text-color": null,
-        "--z-tag-bg": null,
-    },
-    render: (args) => html `<z-tag
-      style=${styleMap({
-        "--z-tag-text-color": args["--z-tag-text-color"],
-        "--z-tag-bg": args["--z-tag-bg"],
-    })}
-      .icon=${args.icon}
-      .expandable=${args.expandable}
-      >${args.text}
-    </z-tag>`,
-};