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

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

@@ -1,70 +0,0 @@
-import { html } from "lit";
-import { COLOR_INDICATOR_ICONS } from "../../constants/iconset";
-import { getColorTokens } from "../../utils/storybook-utils";
-import "./index";
-const StoryMeta = {
-    title: "ZIcon",
-    component: "z-icon",
-    argTypes: {
-        fill: {
-            options: getColorTokens().map((token) => token.replace("--", "")),
-            control: {
-                type: "select",
-            },
-        },
-    },
-    args: {
-        name: "download",
-        height: 24,
-        width: 24,
-        fill: "color-primary01",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-icon
-      name=${args.name}
-      height=${args.height}
-      width=${args.width}
-      fill=${args.fill}
-    ></z-icon>`,
-};
-export const ZIconRem = {
-    args: {
-        name: "download",
-        height: "1.125rem",
-        width: "1.125rem",
-        fill: "color-primary01",
-    },
-    render: (args) => html `<z-icon
-      name=${args.name}
-      height=${args.height}
-      width=${args.width}
-      fill=${args.fill}
-    ></z-icon>`,
-};
-export const ColorIndicator = {
-    argTypes: {
-        name: {
-            options: COLOR_INDICATOR_ICONS,
-            control: { type: "select" },
-        },
-        indicatorColor: {
-            control: { type: "color" },
-        },
-    },
-    args: {
-        name: COLOR_INDICATOR_ICONS[0],
-        fill: "color-black",
-        indicatorColor: "#ff0000",
-        width: 64,
-        height: 64,
-    },
-    render: (args) => html `<z-icon
-      name=${args.name}
-      height=${args.height}
-      width=${args.width}
-      fill=${args.fill}
-      .indicatorColor=${args.indicatorColor}
-    ></z-icon>`,
-};

package/dist/collection/components/z-info-box/index.stories.js

@@ -1,19 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "ZInfoBox",
-    component: "z-info-box",
-    args: {
-        isclosable: true,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-info-box isclosable="${args.isclosable}">
-      <span slot="content"
-        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum convallis ex, eu faucibus velit
-        dignissim in. Quisque at risus accumsan, auctor enim a, varius tortor. Donec egestas sodales mi at imperdiet.
-        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span
-      >
-    </z-info-box>`,
-};

package/dist/collection/components/z-info-reveal/index.stories.js

@@ -1,58 +0,0 @@
-import { html } from "lit";
-import { ControlSize, InfoRevealPosition } from "../../beans";
-import { ICONS } from "../../constants/iconset";
-import "../z-button/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZInfoReveal",
-    component: "z-info-reveal",
-    argTypes: {
-        icon: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(ICONS).sort(),
-        },
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ControlSize),
-        },
-        position: {
-            options: Object.values(InfoRevealPosition),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    parameters: {
-        layout: "centered",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    args: {
-        label: "",
-        icon: "informationsource",
-        size: ControlSize.BIG,
-        position: InfoRevealPosition.TOP_RIGHT,
-    },
-    render: (args) => html `
-    <div class="z-info-reveal-story-wrapper">
-      <z-button .size=${args.size}>Button</z-button>
-      <z-info-reveal
-        .label=${args.label}
-        .icon=${args.icon}
-        .size=${args.size}
-        .position=${args.position}
-      >
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
-          Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?
-        </div>
-      </z-info-reveal>
-    </div>
-  `,
-};

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

@@ -1,293 +0,0 @@
-import { html } from "lit";
-import { ControlSize, InputStatus, InputType, LabelPosition } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZInput",
-    component: "z-input",
-    argTypes: {
-        type: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(InputType),
-        },
-        labelPosition: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(LabelPosition),
-        },
-        size: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ControlSize),
-        },
-        status: {
-            control: {
-                type: "inline-radio",
-                labels: {
-                    null: "-",
-                },
-            },
-            options: [null, ...Object.values(InputStatus)],
-        },
-    },
-    args: {
-        type: InputType.TEXT,
-        label: "this is the input label",
-        ariaLabel: "",
-        labelPosition: LabelPosition.RIGHT,
-        placeholder: "input placeholder text",
-        value: "",
-        size: ControlSize.BIG,
-        name: "",
-        status: null,
-        message: "helper text",
-        icon: "",
-        disabled: false,
-        readonly: false,
-        required: false,
-        checked: false,
-        hasclearicon: true,
-        htmlid: "input-id",
-        htmltitle: "",
-        autocomplete: "",
-        min: 1,
-        minlength: 1,
-        max: 10,
-        maxlength: 10,
-        step: 1,
-        pattern: "",
-    },
-};
-export default StoryMeta;
-export const AllProps = {
-    render: (args) => html `
-    <z-input
-      type=${args.type}
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      .labelPosition=${args.labelPosition}
-      placeholder=${args.placeholder}
-      value=${args.value}
-      name=${args.name}
-      status=${args.status}
-      message=${args.message}
-      icon=${args.icon}
-      .disabled=${args.disabled}
-      .readonly=${args.readonly}
-      .required=${args.required}
-      .checked=${args.checked}
-      hasclearicon=${args.hasclearicon}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      .autocomplete=${args.autocomplete}
-      min=${args.min}
-      minlength=${args.minlength}
-      max=${args.max}
-      maxlength=${args.maxlength}
-      step=${args.step}
-      pattern=${args.pattern}
-      size=${args.size}
-    ></z-input>
-  `,
-};
-export const ZInputText = {
-    render: (args) => html `
-    <z-input
-      type=${args.type}
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      placeholder=${args.placeholder}
-      value=${args.value}
-      name=${args.name}
-      status=${args.status}
-      message=${args.message}
-      icon=${args.icon}
-      .disabled=${args.disabled}
-      .readonly=${args.readonly}
-      .required=${args.required}
-      hasclearicon=${args.hasclearicon}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      .autocomplete=${args.autocomplete}
-      size=${args.size}
-      minlength=${args.minlength}
-      maxlength=${args.maxlength}
-    ></z-input>
-  `,
-    parameters: {
-        controls: {
-            include: [
-                "type",
-                "label",
-                "ariaLabel",
-                "placeholder",
-                "value",
-                "name",
-                "status",
-                "message",
-                "icon",
-                "disabled",
-                "readonly",
-                "required",
-                "hasclearicon",
-                "htmlid",
-                "htmltitle",
-                "autocomplete",
-                "size",
-                "minlength",
-                "maxlength",
-            ],
-        },
-    },
-    argTypes: {
-        type: {
-            options: Object.values(InputType).filter((type) => ["text", "password", "number", "email"].includes(type)),
-        },
-    },
-};
-export const ZInputTextarea = {
-    render: (args) => html `
-    <z-input
-      type=${args.type}
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      placeholder=${args.placeholder}
-      value=${args.value}
-      name=${args.name}
-      status=${args.status}
-      message=${args.message}
-      .disabled=${args.disabled}
-      .readonly=${args.readonly}
-      .required=${args.required}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      size=${args.size}
-    ></z-input>
-  `,
-    parameters: {
-        controls: {
-            include: [
-                "type",
-                "label",
-                "ariaLabel",
-                "placeholder",
-                "value",
-                "name",
-                "status",
-                "message",
-                "disabled",
-                "readonly",
-                "required",
-                "htmlid",
-                "htmltitle",
-                "size",
-            ],
-        },
-    },
-    args: {
-        type: InputType.TEXTAREA,
-    },
-};
-export const ZInputCheckbox = {
-    parameters: {
-        controls: {
-            include: [
-                "label",
-                "ariaLabel",
-                "labelPosition",
-                "name",
-                "disabled",
-                "readonly",
-                "required",
-                "checked",
-                "htmlid",
-                "htmltitle",
-                "size",
-            ],
-        },
-    },
-    args: {
-        type: InputType.CHECKBOX,
-    },
-    render: (args) => html `
-    <z-input
-      type="${args.type}"
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      .labelPosition=${args.labelPosition}
-      name=${args.name}
-      .disabled=${args.disabled}
-      .readonly=${args.readonly}
-      .required=${args.required}
-      .checked=${args.checked}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      size=${args.size}
-    ></z-input>
-  `,
-};
-export const ZInputRadio = {
-    parameters: {
-        controls: {
-            include: [
-                "label",
-                "ariaLabel",
-                "labelPosition",
-                "name",
-                "value",
-                "disabled",
-                "readonly",
-                "required",
-                "checked",
-                "htmlid",
-                "htmltitle",
-                "size",
-            ],
-        },
-    },
-    args: {
-        type: InputType.RADIO,
-    },
-    render: (args) => html `
-    <z-input
-      type=${args.type}
-      label=${args.label}
-      aria-label=${args.ariaLabel}
-      .labelPosition=${args.labelPosition}
-      name=${args.name}
-      value=${args.value}
-      .disabled=${args.disabled}
-      .readonly=${args.readonly}
-      .required=${args.required}
-      .checked=${args.checked}
-      htmlid=${args.htmlid}
-      htmltitle=${args.htmltitle}
-      size=${args.size}
-    ></z-input>
-  `,
-};
-export const ZInputNumber = {
-    parameters: {
-        controls: {
-            include: ["min", "max", "step", "value", "hasclearicon"],
-        },
-    },
-    args: {
-        type: InputType.NUMBER,
-        value: "1",
-        hasclearicon: false,
-    },
-    render: (args) => html `
-    <z-input
-      type=${args.type}
-      value=${args.value}
-      min=${args.min}
-      max=${args.max}
-      step=${args.step}
-      .hasclearicon=${args.hasclearicon}
-    ></z-input>
-  `,
-};

package/dist/collection/components/z-input-message/index.stories.js

@@ -1,36 +0,0 @@
-import { html } from "lit";
-import { ControlSize, InputStatus } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZInputMessage",
-    component: "z-input-message",
-    argTypes: {
-        status: {
-            control: {
-                type: "inline-radio",
-            },
-            options: ["default", ...Object.values(InputStatus)],
-        },
-        class: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ControlSize),
-        },
-    },
-    args: {
-        message: "messaggio",
-        status: InputStatus.ERROR,
-        class: ControlSize.BIG,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-input-message
-      message=${args.message}
-      status=${args.status}
-      class=${args.class}
-    ></z-input-message>
-  `,
-};

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

@@ -1,25 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "ZLogo",
-    component: "z-logo",
-    args: {
-        imageAlt: "logo",
-        height: 50,
-        width: 200,
-        link: "",
-        targetBlank: false,
-        mobileLogo: false,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-logo
-      image-alt="${args.imageAlt}"
-      height="${args.height}"
-      width="${args.width}"
-      link="${args.link}"
-      target-blank="${args.targetBlank}"
-      mobile-logo="${args.mobileLogo}"
-    ></z-logo>`,
-};

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

@@ -1,122 +0,0 @@
-import { html } from "lit";
-import "../z-menu-section/index";
-import "./index";
-const StoryMeta = {
-    title: "Zmenu/ZMenu",
-    component: "z-menu",
-    args: {
-        active: false,
-        floating: true,
-    },
-};
-export default StoryMeta;
-export const FloatingContentLayout = {
-    render: (args) => html `
-    <z-menu
-      .active=${args.active}
-      .floating=${args.floating}
-    >
-      <h3>Menu label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <z-menu-section slot="item">
-        <h3>Item 3</h3>
-        <a
-          href=""
-          slot="section"
-          >Item 3.1</a
-        >
-        <a
-          href=""
-          slot="section"
-          >Item 3.2</a
-        >
-      </z-menu-section>
-      <z-menu-section slot="item">
-        <h3>Item 4</h3>
-        <a
-          href=""
-          slot="section"
-          >Item 4.1</a
-        >
-        <a
-          href=""
-          slot="section"
-          >Item 4.2</a
-        >
-      </z-menu-section>
-      <a
-        href=""
-        slot="item"
-        >Item 5</a
-      >
-    </z-menu>
-  `,
-};
-export const WithHeader = {
-    render: (args) => html `
-    <z-menu
-      .active=${args.active}
-      .floating=${args.floating}
-    >
-      <img
-        slot="header"
-        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
-      />
-      <h4 slot="header">Menu header</h4>
-      <h3>Menu label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <z-menu-section slot="item">
-        <h3>Item 3</h3>
-        <a
-          href=""
-          slot="section"
-          >Item 3.1</a
-        >
-        <a
-          href=""
-          slot="section"
-          >Item 3.2</a
-        >
-      </z-menu-section>
-      <a
-        href=""
-        slot="item"
-        >Item 4</a
-      >
-    </z-menu>
-  `,
-};
-export const ActiveWithoutItems = {
-    parameters: {
-        controls: {
-            exclude: ["floating"],
-        },
-    },
-    render: () => html `
-    <z-menu .active=${true}>
-      <a
-        href="https://cataas.com/cat/gif"
-        target="_blank"
-        >Click me</a
-      >
-    </z-menu>
-  `,
-};

package/dist/collection/components/z-menu-section/index.stories.js

@@ -1,40 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "ZMenu/ZMenuSection",
-    component: "z-menu-section",
-    args: {
-        active: false,
-    },
-};
-export default StoryMeta;
-export const WithItems = {
-    render: (args) => html `
-    <z-menu-section .active=${args.active}>
-      <h3>Label</h3>
-      <a
-        href=""
-        slot="section"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="section"
-        >Item 2</a
-      >
-      <a
-        href=""
-        slot="seection"
-        active
-        >Item 3 - active</a
-      >
-    </z-menu-section>
-  `,
-};
-export const WithoutItems = {
-    render: (args) => html `
-    <z-menu-section .active=${args.active}>
-      <h3>Label</h3>
-    </z-menu-section>
-  `,
-};