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

package/dist/collection/components/z-tooltip/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-tooltip/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IAEtB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,eAAe,CAAC,IAAI;gBACpB,eAAe,CAAC,GAAG;gBACnB,eAAe,CAAC,MAAM;gBACtB,eAAe,CAAC,IAAI;gBACpB,eAAe,CAAC,KAAK;gBACrB,eAAe,CAAC,QAAQ;gBACxB,eAAe,CAAC,SAAS;gBACzB,eAAe,CAAC,WAAW;gBAC3B,eAAe,CAAC,YAAY;aAC7B;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,4BAA4B,EAAE,sBAAsB,EAAE;KACvD;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,4BAA4B,EAAE,wBAAwB;QACtD,UAAU,EAAE,eAAe,CAAC,IAAI;KACjC;CACkC,CAAC;AAEtC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;oBAOJ,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI;;6CAEoB,IAAI,CAAC,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;GAkB5E;CACc,CAAC;AAElB;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;qBAOH,IAAI,CAAC,QAAQ;iBACjB,IAAI,CAAC,IAAI;;;6CAGmB,IAAI,CAAC,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkC5E;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZTooltip} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTooltipStoriesArgs = ZTooltip & CSSVarsArguments<\"z-tooltip-theme--surface\">;\n\n/**\n * To be sure the algorithm finds the right container, when calculating the position, set its position to `position: relative;`\n * On the following Story, the \"position\" prop can be set only for the original positions of the `z-tooltip` by design.\n */\nconst StoryMeta = {\n  title: \"ZTooltip\",\n  component: \"z-tooltip\",\n\n  argTypes: {\n    \"position\": {\n      options: [\n        PopoverPosition.AUTO,\n        PopoverPosition.TOP,\n        PopoverPosition.BOTTOM,\n        PopoverPosition.LEFT,\n        PopoverPosition.RIGHT,\n        PopoverPosition.TOP_LEFT,\n        PopoverPosition.TOP_RIGHT,\n        PopoverPosition.BOTTOM_LEFT,\n        PopoverPosition.BOTTOM_RIGHT,\n      ],\n      control: {\n        type: \"select\",\n      },\n    },\n    \"--z-tooltip-theme--surface\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"dark\": false,\n    \"--z-tooltip-theme--surface\": \"var(--color-surface01)\",\n    \"position\": PopoverPosition.LEFT,\n  },\n} satisfies Meta<ZTooltipStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZTooltipStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <div class=\"tooltip-container\">\n      <z-button\n        id=\"trigger\"\n        icon=\"plus-filled\"\n      ></z-button>\n      <z-tooltip\n        .position=${args.position}\n        .dark=${args.dark}\n        bind-to=\"#trigger\"\n        style=\"--z-tooltip-theme--surface: ${args[\"--z-tooltip-theme--surface\"]}\"\n      >\n        <div class=\"container\">\n          <z-button>Open</z-button>\n          <z-button>Save as</z-button>\n          <z-button>Share</z-button>\n        </div>\n      </z-tooltip>\n    </div>\n    <script>\n      document.querySelector(\"#trigger\").addEventListener(\"click\", () => {\n        if (document.querySelector(\"z-tooltip\").open) {\n          document.querySelector(\"z-tooltip\").open = false;\n        } else {\n          document.querySelector(\"z-tooltip\").open = true;\n        }\n      });\n    </script>\n  `,\n} satisfies Story;\n\n/**\n * When `closable` property is set to `false`, you can open the tooltip on hover and still click things outside without closing it.\n * In the Story below, the tooltip is opened hovering the button.\n */\nexport const AutocloseOff = {\n  render: (args) => html`\n    <div class=\"tooltip-container\">\n      <z-button\n        id=\"info-button\"\n        icon=\"arrow-clockwise-up-left\"\n      ></z-button>\n      <z-tooltip\n        .position=\"${args.position}\"\n        .dark=\"${args.dark}\"\n        closable=\"false\"\n        bind-to=\"#info-button\"\n        style=\"--z-tooltip-theme--surface: ${args[\"--z-tooltip-theme--surface\"]}\"\n      >\n        <span class=\"tooltip-info-text\">Clicca per fare girare la freccia</span>\n      </z-tooltip>\n    </div>\n    <script>\n      button = document.querySelector(\"#info-button\");\n      tooltip = document.querySelector(\"z-tooltip\");\n      button.addEventListener(\"mouseover\", () => {\n        tooltip.open = true;\n      });\n      button.addEventListener(\"focusin\", () => {\n        tooltip.open = true;\n      });\n      button.addEventListener(\"mouseout\", () => {\n        tooltip.open = false;\n      });\n      button.addEventListener(\"focusout\", () => {\n        tooltip.open = false;\n      });\n      button.onclick = () => {\n        switch (button.icon) {\n          case \"arrow-clockwise-up-left\":\n            button.icon = \"arrow-clockwise-up-right\";\n            break;\n          case \"arrow-clockwise-up-right\":\n            button.icon = \"arrow-clockwise-down-right\";\n            break;\n          case \"arrow-clockwise-down-right\":\n            button.icon = \"arrow-clockwise-up-left\";\n            break;\n        }\n      };\n    </script>\n  `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-visually-hidden/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-visually-hidden/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAO3C,MAAM,OAAO,eAAe;IAC1B,MAAM;QACJ,OAAO,8DAAQ,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"]}

package/dist/collection/components/z-visually-hidden/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-visually-hidden/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;;;8DAkBsD;CAC7D,CAAC","sourcesContent":["import {html} from \"lit\";\nimport \"./index\";\n\nexport default {\n  title: \"ZVisuallyHidden\",\n  component: \"z-visually-hidden\",\n};\n\nexport const Default = {\n  render: () =>\n    html`<h2 class=\"heading-2\">ZVisuallyHidden</h2>\n      <span\n        >This component visually hide an element while still allowing it to be exposed to assistive technologies (such\n        as screen readers).</span\n      ><span>\n        There are real world situations where visually hiding content may be appropriate:\n        <ul>\n          <li>Hide visually the text of <code>ZAriaAlert</code></li>\n          <li>\n            Take advantage of the behavior and semantics of a native element like a checkbox or radio button, but\n            replace it with a custom styled element visually.\n          </li>\n          <li>\n            Hide visually an <code>h1</code> because could be redundant for a sighted user but could be usefull for\n            navigation through ScreenReader rotor\n          </li>\n        </ul>\n      </span>\n      <z-visually-hidden><div>Hello</div></z-visually-hidden>`,\n};\n"]}

package/dist/collection/constants/breakpoints.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/constants/breakpoints.ts"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,mDAAY,CAAA;IACZ,oDAAa,CAAA;IACb,sDAAc,CAAA;AAChB,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB","sourcesContent":["/** Breakpoints for responsive design. The values are the max width of the screen for each breakpoint. */\nexport enum Breakpoints {\n  MOBILE = 767,\n  TABLET = 1151,\n  DESKTOP = 1365,\n}\n"]}

package/dist/collection/constants/icons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/constants/icons.tsx"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG;IACZ,YAAY,EAAE,UAAU;IACxB,WAAW,EAAE,aAAa;IAC1B,aAAa,EAAE,eAAe;CAC/B,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["const icons = {\n  iconuserlogo: \"user.png\",\n  iconarrowup: \"arrowUp.png\",\n  iconarrowdown: \"arrowDown.png\",\n};\n\nexport default icons;\n"]}