@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/table/cells/z-td/styles.css

@@ -0,0 +1,71 @@
+:host {
+  position: relative;
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
+  background-color: var(--color-surface01);
+  gap: calc(var(--space-unit) * 2) var(--space-unit);
+}
+
+:host,
+* {
+  box-sizing: border-box;
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  box-shadow: 8px 0 16px -8px var(--shadow-color-base);
+}
+
+:host([menu-open]) {
+  z-index: 2;
+}
+
+.cell--content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}
+
+:host([show-menu]) .cell--content {
+  column-gap: var(--space-unit);
+}
+
+.cell--menu-container {
+  margin-left: auto;
+}
+
+:host(:not([show-menu])) .cell--menu-container {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host(:is([show-menu], [menu-open])) .cell--menu-container,
+:host([show-menu]) .cell--menu-container:focus-within {
+  z-index: 1;
+  opacity: 1;
+  pointer-events: all;
+}
+
+:host .cell-popover {
+  z-index: 100;
+}
+
+@media (min-width: 768px) and (hover: hover) {
+  :host([show-menu="hover"]) .cell--menu-container {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([show-menu="hover"]:hover) .cell--menu-container {
+    z-index: 1;
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/table/cells/z-th/styles.css

@@ -0,0 +1,127 @@
+:host {
+  position: relative;
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
+  background-color: var(--color-surface01);
+  gap: calc(var(--space-unit) * 2) var(--space-unit);
+}
+
+:host,
+* {
+  box-sizing: border-box;
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  box-shadow: 8px 0 16px -8px var(--shadow-color-base);
+}
+
+:host([menu-open]) {
+  z-index: 2;
+}
+
+.cell--content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}
+
+:host([show-menu]) .cell--content {
+  column-gap: var(--space-unit);
+}
+
+.cell--menu-container {
+  margin-left: auto;
+}
+
+:host(:not([show-menu])) .cell--menu-container {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host(:is([show-menu], [menu-open])) .cell--menu-container,
+:host([show-menu]) .cell--menu-container:focus-within {
+  z-index: 1;
+  opacity: 1;
+  pointer-events: all;
+}
+
+:host .cell-popover {
+  z-index: 100;
+}
+
+@media (min-width: 768px) and (hover: hover) {
+  :host([show-menu="hover"]) .cell--menu-container {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([show-menu="hover"]:hover) .cell--menu-container {
+    z-index: 1;
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+
+:host {
+  z-index: 1;
+  padding: 0;
+  background-color: var(--color-background);
+  font-weight: var(--font-sb);
+}
+
+.cell--content {
+  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
+}
+
+:host([show-sorting]) .cell--content {
+  column-gap: var(--space-unit);
+}
+
+.z-th--sort-button {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+}
+
+@media (min-width: 768px) and (hover: hover) {
+  :host([show-sorting="hover"]) .z-th--sort-button {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([show-sorting="hover"]:hover) .z-th--sort-button,
+  :host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible,
+  :host([show-sorting="always"]) .z-th--sort-button,
+  :host([sorted]) .z-th--sort-button {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+:host([show-sorting="hover"]:hover) .z-th--sort-button::after,
+:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible::after,
+:host([show-sorting="always"]) .z-th--sort-button::after,
+:host([sorted]) .z-th--sort-button::after {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: calc(100% - 12px);
+  height: calc(100% - 10px);
+  background-color: transparent;
+  content: "";
+}
+
+:host([sorted]) .z-th--sort-button::after,
+.z-th--sort-button:focus:focus-visible::after {
+  box-shadow: var(--shadow-focus-primary);
+}

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/table/z-table/styles.css

@@ -0,0 +1,18 @@
+:host {
+  --z-table--cells-padding: calc(var(--space-unit) * 2);
+
+  position: relative;
+  display: block;
+  overflow: auto;
+  max-width: 100%;
+  box-sizing: border-box;
+  background-color: var(--color-surface01);
+}
+
+:host([expandable]) {
+  --z-table--expand-button-size: 40px;
+}
+
+:host([bordered]) {
+  --z-table--cell-left-border: 1px solid var(--color-surface03);
+}

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/table/z-tbody/styles.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/table/z-tfoot/styles.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  border-top: 1px solid var(--color-surface03);
+  border-bottom: 1px solid var(--color-surface03);
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 1;
+  bottom: 0;
+  background-color: var(--color-surface01);
+}

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/table/z-thead/styles.css

@@ -0,0 +1,19 @@
+:host {
+  --z-table--cells-bottom-border-size: var(
+    --border-size-medium
+  ); /* Needed to handle the border of the expand button cell */
+
+  --z-table--cells-background: var(
+    --color-background
+  ); /* Needed to handle the background-color of the expand button cell */
+
+  display: block;
+  box-sizing: border-box;
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+  box-shadow: 0 2px 4px -2px var(--shadow-color-base);
+}

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/table/z-tr/styles.css

@@ -0,0 +1,86 @@
+:host {
+  /* number of columns of the row. will be set in component's ts code */
+  --columns: 1;
+
+  display: grid;
+  box-sizing: border-box;
+  grid-auto-flow: column;
+  grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.z-tr--expand-button-container,
+::slotted(*) {
+  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);
+}
+
+::slotted(*:not(:last-child)) {
+  border-right: var(--z-table--cell-left-border, none);
+}
+
+:host([expandable]) {
+  --show-expandable-button: visible;
+
+  cursor: pointer;
+}
+
+:host([expandable]) ::slotted(*) {
+  grid-row: 1;
+}
+
+:host([expandable]) ::slotted(:nth-last-child(2)) {
+  border-right: none;
+}
+
+:host([expandable]) ::slotted(*:last-child) {
+  border-left: 0;
+  grid-column: 1 / span calc(var(--columns) + 1);
+  grid-row: 2;
+}
+
+:host([expandable]:not([expanded])) ::slotted(*:last-child) {
+  display: none;
+}
+
+:host([expanded]) {
+  margin-bottom: 4px; /* prevents shadow to be cut by the next element */
+  box-shadow: 0 4px 4px -2px var(--shadow-color-base);
+}
+
+:host([expanded]) .z-tr--expand-button-container,
+:host([expanded]) ::slotted(*) {
+  background-color: var(--color-background);
+}
+
+.z-tr--expand-button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--z-table--cells-background, var(--color-surface01));
+}
+
+.z-tr--expand-button-container button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  margin: auto;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  visibility: var(--show-expandable-button, hidden);
+}
+
+.z-tr--expand-button-container button:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+.z-tr--expand-button-container button z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}

package/dist/node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-accordion/styles.css

@@ -0,0 +1,260 @@
+:host,
+:host *,
+:host ::slotted(*) {
+  box-sizing: border-box;
+}
+
+:host {
+  --z-accordion-highlight-color: transparent;
+  --z-accordion-bg: var(--color-surface01);
+  --z-accordion-label-color: var(--color-default-text);
+  --z-accordion-disabled-label-color: var(--color-text03);
+  --z-accordion-content-bg: var(--color-surface01);
+  --z-accordion-content-fg: var(--color-default-text);
+  --z-accordion-hover-color: var(--color-surface02);
+  --z-accordion-left-padding: calc(var(--space-unit) * 2);
+  --z-accordion-right-padding: var(--space-unit);
+  --z-accordion-label-font-weight: var(--font-sb);
+
+  display: block;
+  border-top: var(--border-size-small) solid var(--color-surface03);
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host([variant="background"]) {
+  border: var(--border-size-small) solid var(--color-surface03);
+  border-radius: var(--border-radius);
+}
+
+:host([variant="background"][shadow]) {
+  box-shadow: var(--shadow-2);
+}
+
+details {
+  background-color: transparent;
+}
+
+summary {
+  --summary-x-small-height: 32px;
+  --summary-small-height: 36px;
+  --summary-big-height: 44px;
+  --summary-height: var(--summary-big-height);
+  --summary-y-padding: var(--space-unit);
+
+  position: relative;
+  display: flex;
+  min-height: var(--summary-height);
+  align-items: center;
+  padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)
+    var(--z-accordion-left-padding);
+  background-color: var(--z-accordion-bg);
+  column-gap: var(--space-unit);
+  cursor: pointer;
+  list-style: none;
+}
+
+/* remove marker on safari */
+summary::-webkit-details-marker {
+  display: none;
+}
+
+:host([size="x-small"]) summary {
+  --summary-height: var(--summary-x-small-height);
+}
+
+:host([size="small"]) summary {
+  --summary-height: var(--summary-small-height);
+}
+
+:host(:is([size="x-small"], [size="small"])) summary {
+  --summary-y-padding: calc(var(--space-unit) / 2);
+}
+
+:host([variant="background"]) summary {
+  padding-right: calc(var(--space-unit) * 2);
+
+  /* border-radius of the accordion - width of the accordion's border */
+  border-radius: calc(var(--border-radius) - var(--border-size-small));
+}
+
+:host([variant="background"][open]) summary {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+:host([is-disabled]) summary {
+  cursor: default;
+}
+
+summary:focus:focus-visible {
+  background-color: var(--z-accordion-hover-color);
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+summary::before,
+:host([highlight][variant="background"]) .z-accordion-content::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: var(--space-unit);
+  height: 100%;
+  content: "";
+}
+
+:host([highlight][variant="background"]) summary::before {
+  /* border-radius of the accordion - width of the accordion's border */
+  border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));
+}
+
+:host([highlight][variant="background"]:not([open])) summary::before,
+:host([highlight][variant="background"][open]) .z-accordion-content::before {
+  /* border-radius of the accordion - width of the accordion's border */
+  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
+}
+
+:host([highlight]) summary::before,
+:host([highlight][variant="background"]) .z-accordion-content::before {
+  background-color: var(--z-accordion-highlight-color, transparent);
+}
+
+:host([is-disabled][highlight]) summary::before,
+:host([is-disabled][highlight][variant="background"]) .z-accordion-content::before {
+  background-color: var(--z-accordion-disabled-label-color);
+}
+
+summary > z-icon {
+  fill: var(--z-accordion-label-color);
+}
+
+:host([is-disabled]) summary > z-icon {
+  fill: var(--z-accordion-disabled-label-color);
+}
+
+.z-accordion-label {
+  color: var(--z-accordion-label-color);
+  font-size: var(--font-size-3); /* for "small" and "big" sizes */
+  font-weight: var(--z-accordion-label-font-weight);
+}
+
+:host([size="x-small"]) .z-accordion-label {
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+.z-accordion-tags {
+  display: flex;
+  align-items: center;
+  column-gap: calc(var(--space-unit) / 2);
+}
+
+summary z-icon.z-accordion-chevron {
+  margin-left: auto;
+}
+
+.z-accordion-content {
+  position: relative;
+  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
+  background-color: var(--z-accordion-content-bg);
+  color: var(--z-accordion-content-fg);
+  font-size: var(--font-size-2); /* for "small" and "big" sizes */
+}
+
+:host(:is([size="x-small"], [size="small"])) .z-accordion-content {
+  padding-bottom: var(--space-unit);
+}
+
+:host([size="x-small"]) .z-accordion-content {
+  font-size: var(--font-size-1);
+}
+
+:host([variant="background"]) .z-accordion-content {
+  padding-right: calc(var(--space-unit) * 2);
+}
+
+:host([is-disabled]) .z-accordion-label {
+  color: var(--z-accordion-disabled-label-color);
+}
+
+:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]) {
+  --z-tag-bg: var(--z-accordion-disabled-label-color) !important;
+  --z-tag-text-color: var(--color-text-inverse) !important;
+}
+
+@media (hover: hover) {
+  summary:focus:focus-visible {
+    /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */
+    position: relative;
+    z-index: 1;
+  }
+
+  :host(:not([is-disabled])) summary:hover {
+    background-color: var(--z-accordion-hover-color);
+  }
+
+  :host(:not([is-disabled])) summary:hover .z-accordion-label {
+    text-decoration: underline;
+  }
+}
+
+/* force "big" variant on touch devices */
+@media (hover: none) {
+  :host([size]) summary {
+    --summary-height: var(--summary-big-height);
+    --summary-y-padding: var(--space-unit);
+  }
+
+  :host([size]) .z-accordion-label {
+    font-size: var(--font-size-3);
+  }
+
+  :host([size]) .z-accordion-content {
+    font-size: var(--font-size-2);
+  }
+
+  :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {
+    --z-icon-width: 18px;
+    --z-icon-height: 18px;
+  }
+}
+
+/* Style for sibling accordions in a stack context */
+
+z-accordion + z-accordion {
+  border-top: none;
+}
+
+z-accordion[variant="background"] + z-accordion[variant="background"] {
+  border-radius: 0;
+}
+
+z-accordion[variant="background"]:first-of-type:not(:last-of-type) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary) {
+  border-radius: 0;
+}
+
+z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary) {
+  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
+  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
+}