@zanichelli/albe-web-components 19.3.0-rc1 → 19.4.0

package/dist/collection/components/z-toast-notification/index.stories.js

@@ -1,176 +0,0 @@
-import { html } from "lit";
-import { ToastNotification, ToastNotificationTransition } from "../../beans";
-import "../z-button/index";
-import "./index";
-const longText = "Testo decisamente lungo, che non sta su 1 sola riga. Questo testo occupa varie righe ed è un esempio di come vengono posizionati gli elementi in caso di testo lungo.";
-const template = (args) => html `<div class="toast-container">
-    <z-toast-notification
-      heading="${args.heading}"
-      message="${args.message}"
-      closebutton="${args.closebutton}"
-      autoclose="${args.autoclose}"
-      pauseonfocusloss="${args.pauseonfocusloss}"
-      type="${args.type}"
-      isdraggable="${args.isdraggable}"
-      draggablepercentage="${args.draggablepercentage}"
-      transition="${args.transition}"
-    ></z-toast-notification>
-  </div>`;
-const StoryMeta = {
-    title: "ZToastNotification",
-    component: "z-toast-notification",
-    argTypes: {
-        type: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(ToastNotification),
-        },
-        transition: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ToastNotificationTransition),
-        },
-    },
-    args: {
-        heading: "Titolo",
-        message: "Questo è un messaggio di prova.",
-        closebutton: true,
-        autoclose: null,
-        pauseonfocusloss: false,
-        type: ToastNotification.DARK,
-        isdraggable: true,
-        draggablepercentage: 80,
-    },
-    render: (args) => template(args),
-};
-export default StoryMeta;
-export const NoSlideIn = {
-    args: {
-        message: "Messaggio con <b>grassetto</b> e altro <i>html</i> renderizzato",
-    },
-};
-export const SlideInRight = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_RIGHT,
-    },
-};
-export const SlideInLeft = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_LEFT,
-    },
-};
-export const SlideInDownNoCloseButton = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_DOWN,
-        closebutton: false,
-    },
-};
-export const SlideInUpLongText = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_UP,
-        message: longText,
-    },
-};
-export const SlottedButton = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_DOWN,
-    },
-    render: (args) => html `<div class="toast-container slotted-button">
-      <z-toast-notification
-        heading="${args.heading}"
-        message="${args.message}"
-        closebutton="${args.closebutton}"
-        autoclose="${args.autoclose}"
-        pauseonfocusloss="${args.pauseonfocusloss}"
-        type="${args.type}"
-        isdraggable="${args.isdraggable}"
-        draggablepercentage="${args.draggablepercentage}"
-        transition="${args.transition}"
-      >
-        <z-button
-          slot="button"
-          size="small"
-          variant="tertiary"
-          >button</z-button
-        >
-      </z-toast-notification>
-    </div>`,
-};
-export const SlottedButtonLongText = {
-    args: {
-        transition: ToastNotificationTransition.SLIDE_IN_DOWN,
-    },
-    render: (args) => html `<div class="toast-container slotted-button">
-      <z-toast-notification
-        heading="Titolo abbastanza lungo"
-        message=${longText}
-        closebutton="${args.closebutton}"
-        autoclose="${args.autoclose}"
-        pauseonfocusloss="${args.pauseonfocusloss}"
-        type="${args.type}"
-        isdraggable="${args.isdraggable}"
-        draggablepercentage="${args.draggablepercentage}"
-        transition="${args.transition}"
-      >
-        <z-button
-          slot="button"
-          size="small"
-          variant="tertiary"
-          >button</z-button
-        >
-      </z-toast-notification>
-    </div>`,
-};
-export const SlottedMessage = {
-    args: { transition: ToastNotificationTransition.SLIDE_IN_DOWN },
-    parameters: { controls: { exclude: ["message"] } },
-    render: (args) => html `<div class="toast-container">
-      <z-toast-notification
-        heading="${args.heading}"
-        closebutton="${args.closebutton}"
-        autoclose="${args.autoclose}"
-        pauseonfocusloss="${args.pauseonfocusloss}"
-        type="${args.type}"
-        isdraggable="${args.isdraggable}"
-        draggablepercentage="${args.draggablepercentage}"
-        transition="${args.transition}"
-      >
-        <span slot="message"
-          >Messaggio con
-          <a
-            href="#"
-            class="z-link z-link-blue"
-            >link</a
-          >
-          e <b>grassetto</b></span
-        >
-      </z-toast-notification>
-    </div>`,
-};
-export const SlottedMessageLongText = {
-    args: { transition: ToastNotificationTransition.SLIDE_IN_DOWN },
-    parameters: { controls: { exclude: ["message"] } },
-    render: (args) => html `<div class="toast-container">
-      <z-toast-notification
-        heading="Titolo abbastanza lungo"
-        closebutton="${args.closebutton}"
-        autoclose="${args.autoclose}"
-        pauseonfocusloss="${args.pauseonfocusloss}"
-        type="${args.type}"
-        isdraggable="${args.isdraggable}"
-        draggablepercentage="${args.draggablepercentage}"
-        transition="${args.transition}"
-      >
-        <span slot="message"
-          >${longText}
-          <a
-            href="#"
-            class="z-link z-link-blue"
-            >link</a
-          ></span
-        >
-      </z-toast-notification>
-    </div>`,
-};

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

@@ -1,147 +0,0 @@
-import { html } from "lit";
-import { ToastNotificationPosition, ToastNotificationTransition } from "../../beans";
-import "../z-button/index";
-import "../z-toast-notification/index";
-import "./index";
-import "./index.stories.css";
-const template = (args, notificationTransition = ToastNotificationTransition.SLIDE_IN_DOWN, slottedMessage) => html `<div class="z-toast-notification-container">
-    <z-toast-notification-list
-      position="${args.position}"
-      newestontop="${args.newestontop}"
-    >
-      ${slottedMessage
-    ? html `<z-toast-notification
-            slot="toasts"
-            type="dark"
-            heading="Notification"
-            .transition=${notificationTransition}
-            draggablepercentage="50"
-            autoclose="18000"
-            closebutton
-          >
-            ${slottedMessage}
-          </z-toast-notification>`
-    : html `<z-toast-notification
-            slot="toasts"
-            type="dark"
-            heading="Notification"
-            message="Autoclose 18s."
-            .transition=${notificationTransition}
-            draggablepercentage="50"
-            autoclose="18000"
-            closebutton
-          >
-          </z-toast-notification>`}
-
-      <z-toast-notification
-        slot="toasts"
-        type="dark"
-        heading="Notification"
-        message="Senza pulsante."
-        .transition=${notificationTransition}
-        draggablepercentage="50"
-        closebutton
-      >
-      </z-toast-notification>
-      <z-toast-notification
-        slot="toasts"
-        type="dark"
-        heading="Notification"
-        message="Con pulsante"
-        .transition=${notificationTransition}
-        draggablepercentage="50"
-        closebutton
-      >
-        <z-button
-          slot="button"
-          size="small"
-          >button</z-button
-        >
-      </z-toast-notification>
-    </z-toast-notification-list>
-  </div>`;
-const StoryMeta = {
-    title: "ZToastNotificationList",
-    component: "z-toast-notification-list",
-    argTypes: {
-        position: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ToastNotificationPosition),
-        },
-    },
-    args: {
-        newestontop: true,
-    },
-    render: (args) => template(args),
-};
-export default StoryMeta;
-export const TopLeftSlideInDown = {
-    args: {
-        position: ToastNotificationPosition.TOP_LEFT,
-    },
-};
-export const TopLeftSlideInRight = {
-    args: {
-        position: ToastNotificationPosition.TOP_LEFT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),
-};
-export const TopCentre = {
-    args: {
-        position: ToastNotificationPosition.TOP_CENTRE,
-    },
-};
-export const TopRightSlideInDown = {
-    args: {
-        position: ToastNotificationPosition.TOP_RIGHT,
-    },
-};
-export const TopRightSlideInLeft = {
-    args: {
-        position: ToastNotificationPosition.TOP_RIGHT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),
-};
-export const BottomRightSlideInUp = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_RIGHT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),
-};
-export const BottomRightSlideInLeft = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_RIGHT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_LEFT),
-};
-export const BottomCentre = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_CENTRE,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),
-};
-export const BottomCentreSlideInUp = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_LEFT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_UP),
-};
-export const BottomLeftSlideInRight = {
-    args: {
-        position: ToastNotificationPosition.BOTTOM_LEFT,
-    },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_RIGHT),
-};
-export const TopLeftWithSlottedMessage = {
-    args: { position: ToastNotificationPosition.TOP_LEFT },
-    render: (args) => template(args, ToastNotificationTransition.SLIDE_IN_DOWN, html `<span slot="message"
-        >Autoclose 18s con
-        <a
-          href="#"
-          class="z-link z-link-blue"
-          >link</a
-        ></span
-      >`),
-};

package/dist/collection/components/z-toggle-button/index.stories.js

@@ -1,22 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "ZToggleButton",
-    args: {
-        label: "Toggle",
-        ariaLabel: "",
-        avoidclick: false,
-        isdisabled: false,
-        opened: false,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-toggle-button
-      label=${args.label}
-      .ariaLabel=${args.ariaLabel}
-      .avoidclick=${args.avoidclick}
-      .isdisabled=${args.isdisabled}
-      .opened=${args.opened}
-    ></z-toggle-button>`,
-};

package/dist/collection/components/z-toggle-switch/index.stories.js

@@ -1,26 +0,0 @@
-import { html } from "lit";
-import { LabelPosition } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZToggleSwitch",
-    argTypes: {
-        labelPosition: {
-            options: Object.values(LabelPosition),
-            control: { type: "radio" },
-        },
-    },
-};
-export default StoryMeta;
-export const Default = {
-    args: {
-        labelPosition: LabelPosition.LEFT,
-        disabled: false,
-    },
-    render: (args) => html `
-    <z-toggle-switch
-      .labelPosition=${args.labelPosition}
-      disabled=${args.disabled}
-      >Toggle
-    </z-toggle-switch>
-  `,
-};

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

@@ -1,146 +0,0 @@
-import { html } from "lit";
-import { PopoverPosition } from "../../beans";
-import { ICONS } from "../../constants/iconset";
-import "../z-color-picker/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZTool",
-    component: "z-tool",
-    argTypes: {
-        tooltipPosition: {
-            options: Object.values(PopoverPosition),
-            control: { type: "select" },
-        },
-        indicatorColor: {
-            control: "color",
-        },
-        icon: {
-            options: Object.keys(ICONS),
-            control: { type: "select" },
-        },
-    },
-    args: {
-        active: false,
-        disabled: false,
-        htmlAriaLabel: "Impostazioni",
-        icon: "gear",
-        indicatorColor: "",
-        tooltip: "Impostazioni",
-        tooltipPosition: PopoverPosition.TOP,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<div class="tool-container">
-      <z-tool
-        icon=${args.icon}
-        tooltip=${args.tooltip}
-        tooltip-position=${args.tooltipPosition}
-        .indicatorColor=${args.indicatorColor}
-        html-aria-label=${args.htmlAriaLabel}
-        ?active=${args.active}
-        ?disabled=${args.disabled}
-      ></z-tool>
-    </div>`,
-};
-export const Active = {
-    args: {
-        active: true,
-    },
-    render: (args) => html `<div class="tool-container">
-      <z-tool
-        icon=${args.icon}
-        tooltip=${args.tooltip}
-        tooltip-position=${args.tooltipPosition}
-        .indicatorColor=${args.indicatorColor}
-        html-aria-label=${args.htmlAriaLabel}
-        ?active=${args.active}
-        ?disabled=${args.disabled}
-      ></z-tool>
-    </div>`,
-};
-export const Disabled = {
-    args: {
-        disabled: true,
-    },
-    render: (args) => html `<div class="tool-container">
-      <z-tool
-        icon=${args.icon}
-        tooltip=${args.tooltip}
-        tooltip-position=${args.tooltipPosition}
-        .indicatorColor=${args.indicatorColor}
-        html-aria-label=${args.htmlAriaLabel}
-        ?active=${args.active}
-        ?disabled=${args.disabled}
-      ></z-tool>
-    </div>`,
-};
-export const WithToolbar = {
-    render: (args) => html `<div class="tool-container">
-      <z-tool
-        icon=${args.icon}
-        tooltip=${args.tooltip}
-        tooltip-position=${args.tooltipPosition}
-        .indicatorColor=${args.indicatorColor}
-        html-aria-label=${args.htmlAriaLabel}
-        ?active=${args.active}
-        ?disabled=${args.disabled}
-      >
-        <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-          <z-tool
-            icon="gear"
-            tooltip="Impostazioni"
-          ></z-tool>
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-down"
-            tooltip="Giù"
-          ></z-tool>
-          <z-divider orientation="vertical"></z-divider>
-          <z-tool
-            icon="download"
-            tooltip="Scarica"
-          ></z-tool>
-          <z-tool
-            icon="upload"
-            tooltip="Carica"
-          ></z-tool>
-          <z-tool
-            icon="copy"
-            tooltip="Copia"
-          ></z-tool> </z-toolbar
-      ></z-tool>
-    </div>`,
-};
-export const ColorPicker = {
-    args: {
-        icon: "bg-color",
-        indicatorColor: "#ff0000",
-        tooltip: "Colore di sfondo",
-    },
-    parameters: {
-        docs: {
-            story: {
-                inline: false,
-                height: "300px",
-            },
-        },
-    },
-    render: (args) => html `<div class="tool-container">
-      <z-tool
-        icon=${args.icon}
-        tooltip=${args.tooltip}
-        tooltip-position=${args.tooltipPosition}
-        .indicatorColor=${args.indicatorColor}
-        html-aria-label=${args.htmlAriaLabel}
-        ?active=${args.active}
-        ?disabled=${args.disabled}
-      >
-        <z-color-picker></z-color-picker>
-      </z-tool>
-    </div>`,
-};