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

package/dist/collection/components/css-components/z-scrollbar/index.stories.js

@@ -1,72 +0,0 @@
-import { html } from "lit";
-import "./index.stories.css";
-/**
- * <p>If applied to elements with CSS property "overflow:scroll", the class will apply to both the vertical AND the horizontal scrollbars. To avoid this, use "overflow-y" instead.</p>
- * Bear in mind that the scrollbar behaves in different ways depending on the browser: <br />
- *    <ul>
- *      <li>Chrome desktop + Android + MS Edge + opera:
- *        <ul>
- *          <li>primary color scrollbar thumb with right angles</li>
- *          <li>gray scrollbar track</li>
- *          <li>thumb gets darker on hover</li>
- *          <li>thumb doesn't bounce when at end of track</li>
- *        </ul>
- *      </li>
- *      <li>Safari on Mac + chromium 69 (booktab):
- *        <ul>
- *          <li>thumb bounces when at end of track</li>
- *        </ul>
- *      </li>
- *      <li>Safari on iPad:
- *        <ul>
- *          <li>no scrollbars</li>
- *        </ul>
- *      </li>
- *      <li>Chrome on iPad:
- *        <ul>
- *          <li>gray, narrower thumb</li>
- *          <li>no track</li>
- *        </ul>
- *      </li>
- *      <li>Firefox desktop:
- *        <ul>
- *          <li>thumb has border radius</li>
- *          <li>no track</li>
- *          <li>thumb gets wider on hover</li>
- *        </ul>
- *      </li>
- *      <li>Firefox on Android:
- *        <ul>
- *          <li>th scrollbar disappears if you're not actively scrolling</li>
- *          <li>thumb has border radius</li>
- *          <li>no track</li>
- *        </ul>
- *      </li>
- *      <li>Samsung browser:
- *        <ul>
- *          <li>no side margins</li>
- *        </ul>
- *      </li>
- *    </ul>
- */
-const StoryMeta = {
-    title: "ZScrollbar",
-};
-export default StoryMeta;
-export const Default = {
-    render: () => html `
-    <div class="z-scrollbar-story">
-      <div class="scrollbar-container z-scrollbar">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales purus et congue pellentesque. Sed quis
-          venenatis nibh. Cras ut velit vel nisl cursus euismod ac quis lorem. In eget nisl lectus. Quisque id nibh in
-          nisi viverra varius vitae id est. Nulla tincidunt mi eget consequat lacinia. Quisque rhoncus dolor a tortor
-          fermentum molestie. Vivamus posuere non sapien vitae auctor. Donec dignissim efficitur consectetur.
-          Suspendisse eu bibendum tortor. Nulla facilisi. Mauris pharetra eleifend dolor. Morbi velit odio, mollis et
-          euismod eu, imperdiet in lectus. Maecenas laoreet tellus et diam finibus blandit. Mauris aliquam quis tellus
-          et congue.
-        </p>
-      </div>
-    </div>
-  `,
-};

package/dist/collection/components/date-picker/z-date-picker/index.stories.js

@@ -1,111 +0,0 @@
-import { html } from "lit";
-import { ZDatePickerMode } from "../../../beans";
-import "../../z-button/index";
-import "../index.stories.css";
-import "./index";
-/**
- * In order to avoid conflits between datepickers, pass a unique id as `datePickerId` prop.
- * This component emits an event called `dateSelect` with the value of the selected date.
- */
-const StoryMeta = {
-    title: "ZDatePicker",
-    component: "z-date-picker",
-    argTypes: {
-        mode: {
-            options: Object.values(ZDatePickerMode),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    args: {
-        ariaLabel: "date-picker",
-        mode: ZDatePickerMode.DATE,
-    },
-    render: (args) => html `
-    <script>
-      document.getElementById("${args.datePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output-${args.datePickerId}");
-        input.innerHTML = "[" + e.detail + "]";
-      });
-    </script>
-    <div class="story-container">
-      <div class="story-picker-container">
-        <z-date-picker
-          mode=${args.mode}
-          .datePickerId=${args.datePickerId}
-          id=${args.datePickerId}
-          ariaLabel=${args.ariaLabel}
-          label=${args.label}
-          value=${args.value}
-        ></z-date-picker>
-      </div>
-      <div class="story-output-container">
-        <span>OUTPUT:</span>
-        <br />
-        <span id="output-${args.datePickerId}" />
-      </div>
-    </div>
-  `,
-};
-export default StoryMeta;
-export const Date = {
-    args: {
-        datePickerId: "picker-01",
-        label: "ZDatePicker with date",
-        value: "25-12-2024",
-    },
-};
-export const DateAndTime = {
-    args: {
-        datePickerId: "picker-02",
-        label: "ZDatePicker with date and time",
-        mode: ZDatePickerMode.DATE_TIME,
-        value: "05-12-2024 - 12:01",
-        name: "date-time-picker",
-    },
-};
-export const MonthsOnly = {
-    args: {
-        datePickerId: "picker-03",
-        label: "ZDatePicker with only months",
-        mode: ZDatePickerMode.MONTHS,
-        value: "12-2024",
-        name: "month-picker",
-    },
-};
-export const CustomToggle = {
-    args: {
-        datePickerId: "picker-04",
-        label: "date picker",
-        value: "25-01-2024",
-        name: "date-toogle-picker",
-    },
-    render: (args) => html `
-    <script>
-      document.getElementById("${args.datePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output-${args.datePickerId}");
-        input.innerHTML = "[" + e.detail + "]";
-      });
-    </script>
-    <div class="story-container">
-      <div class="story-picker-container">
-        <z-date-picker
-          mode=${args.mode}
-          .datePickerId=${args.datePickerId}
-          id=${args.datePickerId}
-          ariaLabel=${args.ariaLabel}
-          label=${args.label}
-          value=${args.value}
-        >
-          <z-button slot="toggle">Open ZDatePicker</z-button>
-        </z-date-picker>
-      </div>
-      <div class="story-output-container">
-        <span>OUTPUT:</span>
-        <br />
-        <span id="output-${args.datePickerId}" />
-      </div>
-    </div>
-  `,
-};

package/dist/collection/components/date-picker/z-range-picker/index.stories.js

@@ -1,109 +0,0 @@
-import { html } from "lit";
-import { ZRangePickerMode } from "../../../beans";
-import "../index.stories.css";
-import "./index";
-/**
- * In order to avoid conflits between datepickers, pass a unique id as `rangePickerId` prop.
- * This component has a callback function `dateSelect` that returns the selected date.
- */
-const StoryMeta = {
-    title: "ZRangePicker",
-    component: "z-range-picker",
-    argTypes: {
-        mode: {
-            options: Object.values(ZRangePickerMode),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-};
-export default StoryMeta;
-export const Date = {
-    args: {
-        mode: ZRangePickerMode.DATE,
-        rangePickerId: "picker-01",
-        firstLabel: "Start date",
-        firstAriaLabel: "start-date",
-        secondLabel: "End date",
-        secondAriaLabel: "end-date",
-        firstPickerPlaceholder: "placeholder1",
-        lastPickerPlaceholder: "placeholder2",
-        firstPickerReadOnly: false,
-        lastPickerReadOnly: false,
-    },
-    render: (args) => html `
-    <script>
-      document.getElementById("${args.rangePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output");
-        input.innerHTML = "[" + e.detail[0] + ", " + e.detail[1] + "]";
-      });
-    </script>
-    <div class="story-container">
-      <div class="story-picker-container">
-        <z-range-picker
-          mode=${args.mode}
-          range-picker-id=${args.rangePickerId}
-          id=${args.rangePickerId}
-          first-aria-label=${args.firstAriaLabel}
-          first-label=${args.firstLabel}
-          second-aria-label=${args.secondAriaLabel}
-          second-label=${args.secondLabel}
-          first-picker-placeholder=${args.firstPickerPlaceholder}
-          last-picker-placeholder=${args.lastPickerPlaceholder}
-          first-picker-read-only=${args.firstPickerReadOnly}
-          last-picker-read-only=${args.lastPickerReadOnly}
-        ></z-range-picker>
-      </div>
-      <div class="story-output-container">
-        <span>OUTPUT:</span>
-        <br />
-        <span id="output" />
-      </div>
-    </div>
-  `,
-};
-export const DateAndTime = {
-    args: {
-        mode: ZRangePickerMode.DATE_TIME,
-        rangePickerId: "picker-02",
-        firstLabel: "Start date",
-        firstAriaLabel: "start-date",
-        secondLabel: "End date",
-        secondAriaLabel: "end-date",
-        firstPickerPlaceholder: "placeholder1",
-        lastPickerPlaceholder: "placeholder2",
-        firstPickerReadOnly: false,
-        lastPickerReadOnly: false,
-    },
-    render: (args) => html `
-    <script>
-      document.getElementById("${args.rangePickerId}").addEventListener("dateSelect", (e) => {
-        const input = document.getElementById("output");
-        input.innerHTML = "[" + e.detail[0] + ", " + e.detail[1] + "]";
-      });
-    </script>
-    <div class="story-container">
-      <div class="story-picker-container">
-        <z-range-picker
-          mode=${args.mode}
-          range-picker-id=${args.rangePickerId}
-          id=${args.rangePickerId}
-          first-aria-label=${args.firstAriaLabel}
-          first-label=${args.firstLabel}
-          second-aria-label=${args.secondAriaLabel}
-          second-label=${args.secondLabel}
-          first-picker-placeholder=${args.firstPickerPlaceholder}
-          last-picker-placeholder=${args.lastPickerPlaceholder}
-          first-picker-read-only=${args.firstPickerReadOnly}
-          last-picker-read-only=${args.lastPickerReadOnly}
-        ></z-range-picker>
-      </div>
-      <div class="story-output-container">
-        <span>OUTPUT:</span>
-        <br />
-        <span id="output" />
-      </div>
-    </div>
-  `,
-};