@zanichelli/albe-web-components 8.1.0-RC1 → 9.0.1

package/dist/collection/components/z-book-card/styles.css

@@ -1,363 +0,0 @@
-/* stylelint-disable value-no-vendor-prefix */
-
-/* COMMON STYLES */
-
-:host {
-  --z-book-card-ribbon-background-color: var(--avatar-C08);
-  --z-book-card-ribbon-shadow-color: var(--green950);
-
-  display: block;
-  width: 100%;
-  max-width: 360px;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host > article {
-  box-sizing: border-box;
-  border: var(--border-size-medium) solid var(--color-surface03);
-  background-color: var(--color-surface01);
-  border-radius: var(--border-radius);
-}
-
-:host div.cover {
-  position: relative;
-  display: flex;
-}
-
-:host div.cover img {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  max-height: 100%;
-  align-self: flex-end;
-}
-
-:host div.cover div.ribbon {
-  position: absolute;
-  top: calc(var(--space-unit) * 2);
-  display: flex;
-  max-width: 100%;
-  height: calc(var(--space-unit) * 4);
-  box-sizing: border-box;
-  align-items: center;
-  padding: 0 calc(var(--space-unit) * 2);
-  border: var(--border-size-medium) solid var(--color-surface01);
-  margin-left: calc(var(--space-unit) * -2);
-  background: var(--z-book-card-ribbon-background-color);
-  border-radius: 0 var(--border-radius) var(--border-radius) 0;
-  color: var(--color-text04);
-  font-size: var(--font-size-2);
-  font-weight: var(--font-sb);
-  line-height: initial;
-}
-
-:host div.cover div.ribbon span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: nowrap;
-}
-
-:host div.cover div.ribbon::before {
-  position: absolute;
-  bottom: -12px;
-  left: 0;
-  width: 0;
-  height: 0;
-  border-top: 10px solid var(--z-book-card-ribbon-shadow-color);
-  border-left: 14px solid transparent;
-  content: "";
-}
-
-:host div.title {
-  color: var(--color-text01);
-  font-size: var(--font-size-4);
-  font-weight: var(--font-sb);
-  line-height: 1.5;
-}
-
-:host div.title * {
-  all: unset;
-}
-
-:host div.subtitle {
-  color: var(--color-text01);
-  font-size: var(--font-size-2);
-  font-weight: var(--font-rg);
-  line-height: 1.4;
-}
-
-:host div.authors {
-  color: var(--color-text01);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-rg);
-  line-height: 1.33;
-}
-
-:host div.isbn {
-  overflow: hidden;
-  color: var(--color-text01);
-  font-size: var(--font-size-2);
-  line-height: 1.33;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: nowrap;
-}
-
-:host div.isbn > .code {
-  font-weight: var(--font-sb);
-}
-
-:host div.tags {
-  display: flex;
-  overflow: hidden;
-  max-height: 32px;
-  flex-flow: row wrap;
-  align-content: stretch;
-  align-items: stretch;
-  justify-content: flex-start;
-  gap: calc(var(--space-unit) / 2);
-}
-
-:host ::slotted([slot="tags"]) {
-  margin-bottom: var(--space-unit);
-}
-
-:host ::slotted([slot="header-cta"]) {
-  --z-icon-width: 20px;
-  --z-icon-height: 20px;
-
-  padding: var(--space-unit);
-  cursor: pointer;
-  fill: var(--color-icon01);
-}
-
-:host > article.expanded div.content,
-:host > article.search div.content {
-  margin: var(--space-unit) 0;
-}
-
-:host > article.expanded div.cover,
-:host > article.search div.cover {
-  border: var(--border-size-small) solid var(--color-surface03);
-  border-radius: var(--border-radius);
-  line-height: 0;
-}
-
-/* EXPANDED STYLES */
-
-:host > article.expanded {
-  width: 100%;
-  min-width: 328px;
-  padding: calc(var(--space-unit) * 2);
-  padding-bottom: 0;
-}
-
-:host > article.expanded div.header {
-  display: flex;
-  flex-flow: row nowrap;
-  align-content: stretch;
-  align-items: top;
-  justify-content: space-between;
-  margin-bottom: var(--space-unit);
-  white-space: nowrap;
-}
-
-:host > article.expanded div.cover img {
-  width: 100%;
-}
-
-:host > article.expanded .title,
-:host > article.expanded .subtitle,
-:host > article.expanded .authors {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  white-space: initial;
-}
-
-:host > article.expanded div.footer {
-  border-top: var(--border-size-small) solid var(--color-surface03);
-  margin-bottom: calc(var(--space-unit) * 1.5);
-}
-
-:host > article.expanded div.footer.open {
-  padding-top: calc(var(--space-unit) * 1.5);
-}
-
-:host > article.expanded div.footer.open div.resources {
-  display: initial;
-}
-
-:host > article.expanded div.footer.close div.resources {
-  display: none;
-}
-
-:host > article.expanded z-link.show-resources {
-  --font-size-link: var(--font-size-2);
-  --font-weight-link: var(--font-sb);
-
-  display: flex;
-  width: 100%;
-  flex-flow: row nowrap;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  padding-top: var(--space-unit);
-}
-
-/* SEARCH STYLES */
-
-:host > article.search {
-  width: 262px;
-  height: 536px;
-  padding: calc(var(--space-unit) * 2);
-  padding-bottom: 0;
-}
-
-:host > article.search .wrapper-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-:host > article.search .wrapper-container .wrapper {
-  height: 451px;
-}
-
-:host > article.search .wrapper-container .action-container {
-  padding-bottom: calc(var(--space-unit) * 2);
-  margin: auto;
-  margin-bottom: 0;
-}
-
-:host > article.search div.header {
-  display: flex;
-  height: 24px;
-  flex-flow: row nowrap;
-  align-content: stretch;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: calc(var(--space-unit) * 1.5);
-  white-space: nowrap;
-}
-
-:host > article.search div.cover {
-  height: 314px;
-}
-
-:host > article.search div.title {
-  font-size: var(--font-size-3);
-}
-
-:host > article.search .title,
-:host > article.search .subtitle,
-:host > article.search .authors {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: nowrap;
-}
-
-/* Tablet breakpoint */
-@media (min-width: 768px) {
-  :host {
-    width: 100%;
-    max-width: initial;
-  }
-
-  /* EXPANDED STYLES */
-
-  :host > article.expanded {
-    width: 100%;
-    min-width: initial;
-    max-width: initial;
-    height: 360px;
-    padding: 0;
-  }
-
-  :host > article.expanded div.wrapper {
-    display: flex;
-    flex-flow: row nowrap;
-    align-content: stretch;
-    align-items: stretch;
-    justify-content: flex-start;
-  }
-
-  :host > article.expanded div.cover {
-    width: 262px;
-    height: 356px;
-    border: 0;
-    background: var(--color-surface01);
-    border-radius: 0;
-  }
-
-  :host > article.expanded div.cover img {
-    width: auto;
-    min-width: 265px;
-  }
-
-  :host > article.expanded div.cover div.ribbon::before {
-    border-left: 12px solid transparent;
-  }
-
-  :host > article.expanded div.content {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
-    height: 356px;
-    flex-flow: column nowrap;
-    align-content: stretch;
-    align-items: stretch;
-    justify-content: space-between;
-    margin: 0;
-    background: var(--color-surface01);
-  }
-
-  :host > article.expanded div.content div.top {
-    padding: calc(var(--space-unit) * 2);
-    padding-bottom: 0;
-  }
-
-  :host > article.expanded div.content div.top div.info {
-    display: flex;
-    flex-flow: row nowrap;
-    align-content: stretch;
-    align-items: stretch;
-    justify-content: space-between;
-    margin-bottom: calc(var(--space-unit) / 2);
-  }
-
-  :host > article.expanded div.content div.top div.info > div.left {
-    width: 100%;
-  }
-
-  :host > article.expanded div.content div.bottom {
-    padding: calc(var(--space-unit) * 2);
-    padding-bottom: 0;
-  }
-}
-
-/* Desktop breakpoint */
-
-@media (min-width: 1152px) {
-  :host {
-    width: 100%;
-    max-width: initial;
-  }
-
-  :host > article.expanded {
-    width: 635px;
-  }
-
-  :host > article.expanded div.content {
-    width: 369px;
-  }
-}
-
-/* Wide breakpoint
-@media (min-width: 1366px) {}
-*/

package/dist/esm/z-book-card.entry.js

@@ -1,111 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-a2ca4b97.js';
-import { Y as BookCardVariant } from './index-c53ca6bc.js';
-import { m as mobileBreakpoint } from './breakpoints-9b81eb1b.js';
-import { r as randomId, h as handleEnterKeydSubmit } from './utils-4db4ed1f.js';
-
-const stylesCss = ":host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);display:block;width:100%;max-width:360px;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article{box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}:host div.cover{position:relative;display:flex}:host div.cover img{width:auto;max-width:100%;height:auto;max-height:100%;align-self:flex-end}:host div.cover div.ribbon{position:absolute;top:calc(var(--space-unit) * 2);display:flex;max-width:100%;height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);margin-left:calc(var(--space-unit) * -2);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;color:var(--color-text04);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host div.cover div.ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host div.cover div.ribbon::before{position:absolute;bottom:-12px;left:0;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:14px solid transparent;content:\"\"}:host div.title{color:var(--color-text01);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host div.title *{all:unset}:host div.subtitle{color:var(--color-text01);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host div.authors{color:var(--color-text01);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host div.isbn{overflow:hidden;color:var(--color-text01);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host div.isbn>.code{font-weight:var(--font-sb)}:host div.tags{display:flex;overflow:hidden;max-height:32px;flex-flow:row wrap;align-content:stretch;align-items:stretch;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host ::slotted([slot=\"tags\"]){margin-bottom:var(--space-unit)}:host ::slotted([slot=\"header-cta\"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-icon01)}:host>article.expanded div.content,:host>article.search div.content{margin:var(--space-unit) 0}:host>article.expanded div.cover,:host>article.search div.cover{border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius);line-height:0}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:top;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded z-link.show-resources{--font-size-link:var(--font-size-2);--font-weight-link:var(--font-sb);display:flex;width:100%;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center;padding-top:var(--space-unit)}:host>article.search{width:262px;height:536px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:flex;height:100%;flex-direction:column;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2);margin:auto;margin-bottom:0}:host>article.search div.header{display:flex;height:24px;flex-flow:row nowrap;align-content:stretch;align-items:center;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover{height:314px}:host>article.search div.title{font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}@media (min-width: 768px){:host{width:100%;max-width:initial}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0}:host>article.expanded div.wrapper{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:flex-start}:host>article.expanded div.cover{width:262px;height:356px;border:0;background:var(--color-surface01);border-radius:0}:host>article.expanded div.cover img{width:auto;min-width:265px}:host>article.expanded div.cover div.ribbon::before{border-left:12px solid transparent}:host>article.expanded div.content{display:flex;overflow:hidden;width:100%;height:356px;flex-flow:column nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;margin:0;background:var(--color-surface01)}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:flex;flex-flow:row nowrap;align-content:stretch;align-items:stretch;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host{width:100%;max-width:initial}:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}";
-
-const ZBookCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isMobile = false;
-    this.hasResources = false;
-    this.showResources = false;
-    this.moveFocusToResources = false;
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth <= mobileBreakpoint;
-  }
-  componentWillLoad() {
-    this.id = `id-${randomId()}`;
-    this.handleResize();
-  }
-  componentWillRender() {
-    this.handleResources();
-  }
-  componentDidRender() {
-    if (this.moveFocusToResources) {
-      this.resourcesWrapper.focus();
-      this.moveFocusToResources = false;
-    }
-  }
-  handleResources() {
-    var _a;
-    if (this.variant !== BookCardVariant.EXPANDED || !this.isMobile) {
-      return;
-    }
-    this.hasResources = ((_a = this.hostElement.querySelectorAll("[slot=resources]")) === null || _a === void 0 ? void 0 : _a.length) > 0;
-  }
-  toggleResources() {
-    this.showResources = !this.showResources;
-    if (this.showResources) {
-      this.moveFocusToResources = true;
-    }
-  }
-  renderCard() {
-    switch (this.variant) {
-      case BookCardVariant.EXPANDED:
-        return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();
-      case BookCardVariant.COMPACT:
-        return h("div", null);
-      case BookCardVariant.SEARCH:
-        return this.renderSearchCard();
-    }
-  }
-  renderExpandedCard() {
-    return (h("div", { class: "wrapper" }, this.renderCover(), h("div", { class: "content" }, h("div", { class: "top" }, h("div", { class: "info" }, h("div", { class: "left" }, this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("div", { class: "right" }, this.renderHeaderCtaSlot())), this.renderTagsSlot()), h("div", { class: "bottom" }, this.renderResourcesSlot()))));
-  }
-  renderMobileExpandedCard() {
-    return (h("div", { class: "wrapper" }, h("div", { class: "header" }, this.renderOperaTitle(), this.renderHeaderCtaSlot()), this.renderCover(), h("div", { class: "content" }, this.renderTagsSlot(), this.renderAuthors(), this.renderVolumeTitle(), this.renderIsbn()), this.hasResources && (h("div", { class: `footer ${this.showResources ? "open" : "close"}` }, this.renderResourcesSlot(), this.renderShowResources()))));
-  }
-  renderSearchCard() {
-    return (h("div", { class: "wrapper-container" }, h("div", { class: "wrapper" }, h("div", { class: "header" }, this.renderOperaTitle(), this.renderHeaderCtaSlot()), this.renderCover(), h("div", { class: "content" }, this.renderTagsSlot(), this.renderAuthors(), this.renderVolumeTitle(), this.renderIsbn())), this.renderFooterCtaSlot()));
-  }
-  renderCover() {
-    return (h("div", { class: "cover" }, this.ribbon && this.variant !== BookCardVariant.COMPACT && (h("div", { class: "ribbon" }, h("span", null, this.ribbon))), h("img", { src: this.cover, onError: () => {
-        if (this.fallbackCover) {
-          this.cover = this.fallbackCover;
-        }
-      }, "aria-hidden": "true" })));
-  }
-  renderOperaTitle() {
-    const title = this.operaTitleTag
-      ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`
-      : this.operaTitle;
-    return (h("div", { class: "title", innerHTML: title }));
-  }
-  renderVolumeTitle() {
-    return this.volumeTitle ? h("div", { class: "subtitle" }, this.volumeTitle) : null;
-  }
-  renderAuthors() {
-    return this.authors ? (h("div", { class: "authors", "aria-description": "Autori" }, this.authors)) : null;
-  }
-  renderIsbn() {
-    if (!this.isbn) {
-      return null;
-    }
-    return (h("div", { class: "isbn" }, h("span", { class: "code", "aria-description": "ISBN edizione cartacea" }, this.isbn), h("span", { class: "label" }, " (ed. cartacea)")));
-  }
-  renderShowResources() {
-    return (h("z-link", { icon: this.showResources ? "chevron-up" : "chevron-down", iconposition: "right", role: "button", class: "show-resources", "aria-label": `Risorse del libro ${this.operaTitle}`, "aria-expanded": this.showResources.toString(), "aria-haspopup": "menu", "aria-controls": `resources-${this.id}`, onClick: () => this.toggleResources(), onKeyUp: (e) => handleEnterKeydSubmit(e, this.toggleResources.bind(this)) }, this.showResources ? "Chiudi" : "Vedi tutto"));
-  }
-  renderTagsSlot() {
-    return (h("div", { class: "tags" }, h("slot", { name: "tags" })));
-  }
-  renderHeaderCtaSlot() {
-    return h("slot", { name: "header-cta" });
-  }
-  renderResourcesSlot() {
-    return (h("div", { id: `resources-${this.id}`, class: "resources", tabIndex: this.showResources ? 0 : -1, ref: (el) => (this.resourcesWrapper = el) }, h("slot", { name: "resources" })));
-  }
-  renderFooterCtaSlot() {
-    return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
-  }
-  render() {
-    return h("article", { class: `${this.variant}` }, this.renderCard());
-  }
-  get hostElement() { return getElement(this); }
-};
-ZBookCard.style = stylesCss;
-
-export { ZBookCard as z_book_card };

package/dist/types/components/z-book-card/index.d.ts

@@ -1,75 +0,0 @@
-import { BookCardVariant } from "../../beans";
-/**
- * @slot resources - books resources (extended variant only)
- * @slot header-cta - header CTA (e.g. bookmark icon)
- * @slot tags - card tags
- * @slot footer-cta - footer cta button (search variant only)
- * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
- * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
- */
-export declare class ZBookCard {
-  hostElement: HTMLZBookCardElement;
-  /**
-   * Card variant: expanded, compact, search
-   */
-  variant: BookCardVariant;
-  /**
-   * Cover URL
-   */
-  cover: string;
-  /**
-   * Card main title
-   */
-  operaTitle: string;
-  /**
-   * [optional] Card subtitle
-   */
-  volumeTitle?: string;
-  /**
-   * [optional] Authors
-   */
-  authors?: string;
-  /**
-   * [optional] Main ISBN
-   */
-  isbn?: string;
-  /**
-   * [optional] Ribbon label
-   */
-  ribbon?: string;
-  /**
-   * [optional] Fallback cover URL
-   */
-  fallbackCover?: string;
-  /**
-   * [optional] [accessibility] Card title HTML tag
-   */
-  operaTitleTag?: string;
-  isMobile: boolean;
-  hasResources: boolean;
-  showResources: boolean;
-  private id;
-  private moveFocusToResources;
-  private resourcesWrapper;
-  handleResize(): void;
-  componentWillLoad(): void;
-  componentWillRender(): void;
-  componentDidRender(): void;
-  private handleResources;
-  private toggleResources;
-  private renderCard;
-  private renderExpandedCard;
-  private renderMobileExpandedCard;
-  private renderSearchCard;
-  private renderCover;
-  private renderOperaTitle;
-  private renderVolumeTitle;
-  private renderAuthors;
-  private renderIsbn;
-  private renderShowResources;
-  private renderTagsSlot;
-  private renderHeaderCtaSlot;
-  private renderResourcesSlot;
-  private renderFooterCtaSlot;
-  render(): HTMLZBookCardElement;
-}

package/dist/web-components-library/p-03ee7c14.entry.js

@@ -1 +0,0 @@
-import{r,h as a,H as t}from"./p-d17ebc2f.js";import{v as s}from"./p-8c3eeb55.js";const i=class{constructor(a){r(this,a),this.mode=s.POLITE}render(){return a(t,{"aria-live":this.mode,"aria-atomic":"true","aria-relevant":"additions"},a("slot",null))}};export{i as z_aria_alert}