@zanichelli/albe-web-components 19.3.0-RC5 → 19.3.0-RC6

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>
-  `,
-};