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

package/dist/collection/components/z-input/styles.css

@@ -1,406 +0,0 @@
-:host {
-  display: inline-block;
-  width: inherit;
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
-/* GENERAL */
-input::-ms-clear,
-input::-ms-reveal {
-  display: none;
-}
-
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-input,
-textarea {
-  background: var(--color-form-background);
-  fill: var(--color-form-default-icon);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-3);
-  font-weight: var(--font-rg);
-  outline: none;
-}
-
-input,
-.textarea-wrapper {
-  border: var(--border-size-small) solid var(--color-form-surface04);
-  border-radius: var(--border-radius-small);
-  color: var(--color-form-default-text);
-}
-
-:host([size="small"]) input,
-:host([size="small"]) textarea,
-:host([size="x-small"]) input,
-:host([size="x-small"]) textarea {
-  font-size: var(--font-size-2);
-}
-
-:host.cursor-select input {
-  cursor: pointer;
-}
-
-/* HOVER */
-input:not([readonly]):hover,
-.textarea-wrapper:not(.readonly):hover {
-  outline: var(--border-size-medium) solid var(--color-surface04);
-  outline-offset: -2px;
-}
-
-/* FOCUS */
-:host:not(.active-select) input:focus:focus-visible,
-:host:not([readonly="true"]) .textarea-wrapper:focus-within {
-  border-color: var(--color-form-active-primary);
-  box-shadow: var(--shadow-focus-primary);
-  color: var(--color-form-active-primary);
-}
-
-:host input:focus:focus-visible:hover,
-.textarea-wrapper:not(.readonly):focus-within:hover {
-  outline-color: var(--color-form-active-primary);
-}
-
-:host input:focus:focus-visible + .icons-wrapper {
-  fill: var(--color-form-active-primary);
-}
-
-:host.active-select input {
-  border: var(--border-size-small) solid var(--color-form-active-primary);
-}
-
-:host.cursor-select input:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host input[readonly]:focus:focus-visible {
-  border-color: var(--color-form-surface03);
-  box-shadow: none;
-}
-
-/* STATUSES (success, warning, error) */
-.input-success {
-  border-color: var(--color-form-success01);
-  background: var(--color-form-inverse-success);
-}
-
-.input-success:focus:focus-visible + .icons-wrapper,
-.input-success + .icons-wrapper {
-  fill: var(--color-form-success01);
-}
-
-.input-error {
-  border-color: var(--color-form-hover-error);
-  background: var(--color-form-inverse-error);
-}
-
-.input-error:focus:focus-visible + .icons-wrapper,
-.input-error + .icons-wrapper {
-  fill: var(--color-form-hover-error);
-}
-
-.input-warning {
-  border-color: var(--color-form-hover-warning);
-  background: var(--color-form-inverse-warning);
-}
-
-.input-warning:focus:focus-visible + .icons-wrapper,
-.input-warning + .icons-wrapper {
-  fill: var(--color-form-hover-warning);
-}
-
-:is(.input-success, .input-error, .input-warning):focus:focus-visible {
-  color: var(--color-form-default-text);
-}
-
-/* READONLY */
-:host:not(.active-select) input[readonly],
-.textarea-wrapper.readonly {
-  border-color: var(--color-form-surface03);
-  fill: var(--color-form-disabled01-icon);
-  pointer-events: none;
-}
-
-/* DISABLED */
-:host([disabled]:not([disabled="false"])) input,
-:host([disabled]:not([disabled="false"])) .textarea-wrapper,
-:host([disabled]:not([disabled="false"])) z-icon {
-  border-color: var(--color-form-disabled03);
-  box-shadow: none;
-  color: var(--color-form-disabled-text);
-  fill: var(--color-form-disabled01-icon);
-  pointer-events: none;
-}
-
-:host([disabled]:not([disabled="false"])) input:hover {
-  border-width: var(--border-size-small);
-}
-
-/* PLACEHOLDER */
-input::placeholder,
-textarea::placeholder {
-  color: var(--color-form-placeholder-text);
-}
-
-::-webkit-textarea-placeholder {
-  color: var(--color-form-placeholder-text);
-}
-
-:-ms-textarea-placeholder {
-  color: var(--color-form-placeholder-text);
-}
-
-::placeholder {
-  color: var(--color-form-placeholder-text);
-}
-
-:host([disabled]:not([disabled="false"])) label.z-label {
-  color: var(--color-disabled03);
-}
-
-.text-wrapper > div {
-  position: relative;
-  z-index: 1;
-  fill: var(--color-form-default-icon);
-}
-
-.text-wrapper > div > input {
-  width: 100%;
-  height: calc(var(--space-unit) * 5.5);
-  box-sizing: border-box;
-  padding: 0 calc(var(--space-unit) * 1.5);
-  margin: 0;
-}
-
-:host([size="small"]) .text-wrapper > div > input {
-  height: calc(var(--space-unit) * 4.5);
-}
-
-:host([size="x-small"]) .text-wrapper > div > input {
-  height: calc(var(--space-unit) * 4);
-}
-
-.text-wrapper > div > input.has-icon,
-.text-wrapper > div > input.has-clear-icon {
-  padding-right: calc(var(--space-unit) * 5.25);
-}
-
-.text-wrapper > div > input.has-icon.has-clear-icon {
-  padding-right: calc(var(--space-unit) * 8);
-}
-
-.text-wrapper .icons-wrapper {
-  position: absolute;
-  z-index: 2;
-  top: 50%;
-  right: calc(var(--space-unit) * 1.5);
-  display: flex;
-  pointer-events: none;
-  transform: translateY(-50%);
-}
-
-.text-wrapper .icons-wrapper > button.input-icon {
-  display: flex;
-  padding: 0;
-  border: 0;
-  background: none;
-  color: inherit;
-  font: inherit;
-  pointer-events: initial;
-}
-
-.text-wrapper .icons-wrapper > .input-icon + .input-icon {
-  margin-left: calc(var(--space-unit) * 0.5);
-}
-
-.text-wrapper .icons-wrapper > button.input-icon.hidden {
-  display: none;
-}
-
-.text-wrapper .icons-wrapper > button.reset-icon,
-.text-wrapper .icons-wrapper > button.toggle-password-icon {
-  cursor: pointer;
-}
-
-.text-wrapper .icons-wrapper > .input-icon {
-  --z-icon-width: 18px;
-  --z-icon-height: 18px;
-
-  display: block;
-}
-
-.text-wrapper .icons-wrapper > .input-icon.small,
-.text-wrapper .icons-wrapper > .input-icon.x-small {
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-}
-
-.text-wrapper .icons-wrapper > button.input-icon:focus {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
-}
-
-/* stylelint-disable property-no-vendor-prefix */
-.text-wrapper > div > input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px #fff inset;
-  -webkit-text-fill-color: currentcolor;
-}
-
-.textarea-wrapper {
-  width: 100%;
-  height: 100%;
-  padding: calc(var(--space-unit) * 1.5);
-}
-
-.textarea-wrapper:not(.input-error, .input-success, .input-warning) {
-  background-color: var(--color-form-background);
-}
-
-textarea {
-  width: 100%;
-  min-height: 132px;
-  padding: 0;
-  border: none;
-  margin: 0;
-  color: currentcolor;
-  resize: none;
-}
-
-.radio-wrapper,
-.checkbox-wrapper {
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  color: var(--color-default-text);
-  fill: var(--color-primary01);
-  font-family: var(--font-family-sans);
-}
-
-.radio-wrapper:hover,
-.checkbox-wrapper:hover {
-  color: var(--color-hover-primary);
-  fill: var(--color-hover-primary-icon);
-}
-
-.radio-wrapper > input,
-.checkbox-wrapper > input {
-  position: absolute;
-  z-index: -1;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.radio-wrapper .radio-label,
-.checkbox-wrapper .checkbox-label {
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: 1;
-  text-transform: inherit;
-}
-
-.radio-wrapper input:not(:disabled) + .radio-label,
-.checkbox-wrapper input:not(:disabled) + .checkbox-label {
-  cursor: pointer;
-}
-
-.radio-wrapper .radio-label z-icon,
-.checkbox-wrapper .checkbox-label z-icon {
-  cursor: pointer;
-  fill: inherit;
-}
-
-:host([size="small"]) .radio-wrapper .radio-label z-icon,
-:host([size="small"]) .checkbox-wrapper .checkbox-label z-icon {
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-}
-
-:host([size="small"]) .radio-wrapper .radio-label,
-:host([size="small"]) .checkbox-wrapper .checkbox-label {
-  font-size: var(--font-size-2);
-}
-
-:host([size="x-small"]) .radio-wrapper .radio-label z-icon,
-:host([size="x-small"]) .checkbox-wrapper .checkbox-label z-icon {
-  --z-icon-width: 14px;
-  --z-icon-height: 14px;
-}
-
-:host([size="x-small"]) .radio-wrapper .radio-label,
-:host([size="x-small"]) .checkbox-wrapper .checkbox-label {
-  font-size: var(--font-size-1);
-}
-
-.radio-wrapper .radio-label.after,
-.checkbox-wrapper .checkbox-label.after {
-  flex-direction: row;
-}
-
-.radio-wrapper .radio-label.before,
-.checkbox-wrapper .checkbox-label.before {
-  flex-direction: row-reverse;
-}
-
-.radio-wrapper .radio-label.after > span,
-.checkbox-wrapper .checkbox-label.after > span {
-  margin-left: var(--space-unit);
-}
-
-.radio-wrapper .radio-label.before > span,
-.checkbox-wrapper .checkbox-label.before > span {
-  margin-right: var(--space-unit);
-}
-
-:host([size="small"]) .radio-wrapper .radio-label.after > span,
-:host([size="small"]) .checkbox-wrapper .checkbox-label.after > span,
-:host([size="x-small"]) .radio-wrapper .radio-label.after > span,
-:host([size="x-small"]) .checkbox-wrapper .checkbox-label.after > span {
-  margin-left: calc(var(--space-unit) * 0.5);
-}
-
-:host([size="small"]) .radio-wrapper .radio-label.before > span,
-:host([size="small"]) .checkbox-wrapper .checkbox-label.before > span,
-:host([size="x-small"]) .radio-wrapper .radio-label.before > span,
-:host([size="x-small"]) .checkbox-wrapper .checkbox-label.before > span {
-  margin-right: calc(var(--space-unit) * 0.5);
-}
-
-/* focus */
-.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {
-  border-radius: 50%;
-}
-
-.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
-  border-radius: var(--border-radius-small);
-}
-
-.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
-.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-/* disabled */
-.radio-wrapper > input:disabled + .radio-label,
-.checkbox-wrapper > input:disabled + .checkbox-label {
-  color: var(--color-disabled03);
-}
-
-.radio-wrapper > input:disabled + .radio-label > z-icon,
-.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
-  cursor: default;
-  fill: var(--color-disabled01);
-}
-

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