@zanichelli/albe-web-components 18.6.4 → 18.7.0-rc1

package/dist/esm/web-components-library.js

@@ -37,7 +37,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"z-app-header_12\",[[1,\"z-app-header\",{\"stuck\":[516],\"enableOffcanvas\":[1540,\"enable-offcanvas\"],\"enableSearch\":[516,\"enable-search\"],\"searchPlaceholder\":[1,\"search-placeholder\"],\"searchString\":[1025,\"search-string\"],\"searchPageUrl\":[1,\"search-page-url\"],\"enableZLogo\":[516,\"enable-z-logo\"],\"drawerOpen\":[1028,\"drawer-open\"],\"_stuck\":[32],\"menuLength\":[32],\"isMobile\":[32],\"isTablet\":[32]},[[5,\"focusin\",\"manageMenus\"],[5,\"click\",\"manageMenus\"],[1,\"keydown\",\"handleKeydown\"]],{\"_stuck\":[\"onStuck\"],\"drawerOpen\":[\"setMenuFloatingMode\"],\"stuck\":[\"onStuckChange\"]}],[1,\"z-searchbar\",{\"htmlid\":[513],\"preventSubmit\":[4,\"prevent-submit\"],\"value\":[1],\"placeholder\":[1],\"autocomplete\":[4],\"autocompleteMinChars\":[2,\"autocomplete-min-chars\"],\"resultsCount\":[2,\"results-count\"],\"searchHelperLabel\":[1,\"search-helper-label\"],\"resultsItems\":[1,\"results-items\"],\"sortResultsItems\":[4,\"sort-results-items\"],\"showSearchButton\":[4,\"show-search-button\"],\"searchButtonIconOnly\":[4,\"search-button-icon-only\"],\"size\":[1],\"variant\":[1],\"searchString\":[32],\"currResultsCount\":[32],\"showResults\":[32],\"isMobile\":[32],\"selectedItem\":[32]},[[4,\"click\",\"handleOutsideClick\"]],{\"resultsItems\":[\"watchItems\"],\"resultsCount\":[\"watchResultsCount\"],\"value\":[\"watchValue\"],\"searchString\":[\"watchSearchString\"],\"showResults\":[\"watchShowResults\"]}],[6,\"z-offcanvas\",{\"variant\":[513],\"open\":[1540],\"transitiondirection\":[513],\"skipLoadAnimation\":[4,\"skip-load-animation\"],\"skipAnimation\":[32]},[[2,\"click\",\"stopEvent\"],[2,\"focusin\",\"stopEvent\"]],{\"variant\":[\"handlePageOverflow\"],\"open\":[\"onOpenChanged\"]}],[6,\"z-tag\",{\"icon\":[1],\"expandable\":[4]}],[1,\"z-list-group\",{\"size\":[513],\"dividerType\":[513,\"divider-type\"],\"dividerSize\":[513,\"divider-size\"],\"dividerColor\":[513,\"divider-color\"],\"listType\":[513,\"list-type\"],\"hasTreeItems\":[4,\"has-tree-items\"]}],[1,\"z-list\",{\"size\":[513],\"listType\":[513,\"list-type\"],\"role\":[513]}],[1,\"z-list-element\",{\"alignButton\":[513,\"align-button\"],\"clickable\":[516],\"dividerColor\":[1,\"divider-color\"],\"dividerType\":[1,\"divider-type\"],\"dividerSize\":[1,\"divider-size\"],\"expandable\":[516],\"expandableStyle\":[1,\"expandable-style\"],\"listElementId\":[514,\"list-element-id\"],\"size\":[513],\"color\":[513],\"disabled\":[516],\"listElementPosition\":[513,\"list-element-position\"],\"listType\":[513,\"list-type\"],\"hasTreeItems\":[4,\"has-tree-items\"],\"role\":[513],\"htmlTabindex\":[2,\"html-tabindex\"],\"showInnerContent\":[32]},[[4,\"accessibleFocus\",\"accessibleFocusHandler\"]]],[2,\"z-input\",{\"htmlid\":[1],\"type\":[1],\"name\":[1],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaControls\":[1,\"aria-controls\"],\"ariaAutocomplete\":[1,\"aria-autocomplete\"],\"ariaActivedescendant\":[1,\"aria-activedescendant\"],\"value\":[1025],\"disabled\":[516],\"readonly\":[4],\"required\":[4],\"checked\":[1028],\"placeholder\":[1],\"htmltitle\":[1],\"status\":[1],\"message\":[8],\"labelPosition\":[1,\"label-position\"],\"autocomplete\":[1],\"role\":[1],\"hasclearicon\":[4],\"icon\":[1],\"min\":[2],\"minlength\":[2],\"max\":[2],\"maxlength\":[2],\"step\":[2],\"pattern\":[1],\"size\":[513],\"isTyping\":[32],\"passwordHidden\":[32],\"isChecked\":[64]},[[4,\"inputCheck\",\"inputCheckListener\"]]],[1,\"z-input-message\",{\"message\":[1],\"status\":[513],\"disabled\":[516],\"statusRole\":[32]},null,{\"message\":[\"onMessageChange\"],\"status\":[\"onMessageChange\"]}],[2,\"z-divider\",{\"size\":[1],\"color\":[1],\"orientation\":[1]}],[6,\"z-button\",{\"ariaLabel\":[1,\"aria-label\"],\"role\":[1],\"htmlrole\":[1],\"href\":[1],\"target\":[1],\"htmlid\":[1],\"name\":[1],\"disabled\":[516],\"type\":[1],\"variant\":[513],\"icon\":[1],\"iconPosition\":[513,\"icon-position\"],\"size\":[513]}],[1,\"z-icon\",{\"name\":[1],\"height\":[8],\"width\":[8],\"iconid\":[1],\"fill\":[1]}]]],[\"z-app-header-deprecated\",[[1,\"z-app-header-deprecated\",{\"stuck\":[516],\"hero\":[1],\"overlay\":[516],\"flow\":[513],\"drawerOpen\":[516,\"drawer-open\"],\"enableSearch\":[516,\"enable-search\"],\"searchPlaceholder\":[1,\"search-placeholder\"],\"searchString\":[1025,\"search-string\"],\"searchPageUrl\":[1,\"search-page-url\"],\"_stuck\":[32],\"currentViewport\":[32],\"menuLength\":[32]},[[9,\"resize\",\"evaluateViewport\"]],{\"_stuck\":[\"onStuck\"],\"drawerOpen\":[\"setMenuFloatingMode\"],\"stuck\":[\"onStuckMode\"]}]]],[\"z-select\",[[2,\"z-select\",{\"htmlid\":[1],\"items\":[1],\"name\":[1],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"readonly\":[4],\"placeholder\":[1],\"htmltitle\":[1],\"status\":[1],\"message\":[8],\"autocomplete\":[4],\"noresultslabel\":[1],\"hasGroupItems\":[4,\"has-group-items\"],\"hasTreeItems\":[4,\"has-tree-items\"],\"showChildrenOfMatchingParent\":[4,\"show-children-of-matching-parent\"],\"isfixed\":[4],\"resetItem\":[1,\"reset-item\"],\"size\":[1],\"isOpen\":[32],\"selectedItem\":[32],\"focusedItemId\":[32],\"searchString\":[32],\"flattenedList\":[32],\"getSelectedItem\":[64],\"getValue\":[64],\"setValue\":[64]},[[0,\"ariaDescendantFocus\",\"getFocusedItemHandler\"]],{\"items\":[\"watchItems\"]}]]],[\"z-breadcrumb\",[[1,\"z-breadcrumb\",{\"pathStyle\":[513,\"path-style\"],\"homepageVariant\":[1,\"homepage-variant\"],\"maxNodesToShow\":[2,\"max-nodes-to-show\"],\"preventFollowUrl\":[4,\"prevent-follow-url\"],\"overflowMenuItemRows\":[2,\"overflow-menu-item-rows\"],\"truncateChar\":[2,\"truncate-char\"],\"viewPortWidth\":[32],\"hasOverflow\":[32],\"popoverEllipsisOpen\":[32]},[[9,\"resize\",\"handleResize\"]],{\"maxNodesToShow\":[\"handlePropChange\"],\"viewPortWidth\":[\"handleResizeUp\"]}]]],[\"z-combobox\",[[1,\"z-combobox\",{\"inputid\":[1],\"items\":[1],\"label\":[1],\"disabled\":[516],\"hassearch\":[4],\"searchlabel\":[1],\"searchplaceholder\":[1],\"searchtitle\":[1],\"noresultslabel\":[1],\"isopen\":[1028],\"isfixed\":[4],\"closesearchtext\":[1],\"hascheckall\":[4],\"checkalltext\":[1],\"uncheckalltext\":[1],\"maxcheckableitems\":[2],\"hasgroupitems\":[4],\"size\":[1],\"searchValue\":[32],\"selectedCounter\":[32],\"renderItemsList\":[32],\"focusedItemId\":[32],\"checkboxes\":[32]},null,{\"items\":[\"watchItems\"],\"searchValue\":[\"watchSearchValue\"],\"checkboxes\":[\"watchCheckboxes\"]}]]],[\"z-myz-card-dictionary\",[[1,\"z-myz-card-dictionary\",{\"name\":[1],\"cover\":[1],\"disabled\":[4],\"flipped\":[1028],\"flipbuttonlabel\":[1],\"hideinfobtn\":[4]},[[0,\"flipCard\",\"handleFlipCard\"]]]]],[\"z-file-upload\",[[6,\"z-file-upload\",{\"type\":[513],\"buttonVariant\":[1,\"button-variant\"],\"acceptedFormat\":[1,\"accepted-format\"],\"fileMaxSize\":[2,\"file-max-size\"],\"mainTitle\":[1,\"main-title\"],\"description\":[1],\"uploadBtnLabel\":[1,\"upload-btn-label\"],\"dragAndDropLabel\":[1,\"drag-and-drop-label\"],\"allowedFilesMessage\":[1,\"allowed-files-message\"],\"uploadClickableMessage\":[1,\"upload-clickable-message\"],\"uploadMessage\":[1,\"upload-message\"],\"errorModalTitle\":[1,\"error-modal-title\"],\"errorModalMessage\":[1,\"error-modal-message\"],\"uploadedFilesLabel\":[1,\"uploaded-files-label\"],\"hasFileSection\":[4,\"has-file-section\"],\"inputName\":[1,\"input-name\"],\"showErrors\":[4,\"show-errors\"],\"_type\":[32],\"files\":[32],\"invalidFiles\":[32],\"input\":[32],\"getFiles\":[64],\"removeFile\":[64]},[[0,\"removeFile\",\"onFileRemoved\"],[0,\"fileDropped\",\"fileDroppedListener\"]]]]],[\"z-pagination\",[[0,\"z-pagination\",{\"label\":[1],\"navArrows\":[4,\"nav-arrows\"],\"totalPages\":[2,\"total-pages\"],\"skip\":[2],\"edges\":[4],\"split\":[2],\"visiblePages\":[2,\"visible-pages\"],\"currentPage\":[1026,\"current-page\"],\"goToPage\":[4,\"go-to-page\"],\"_visiblePages\":[32],\"isMobile\":[32],\"goToPageValue\":[32]},[[9,\"resize\",\"onResize\"]],{\"_visiblePages\":[\"setPagesContainerWidth\"],\"visiblePages\":[\"setVisiblePages\"],\"currentPage\":[\"onPageChanged\"],\"split\":[\"onSplitChanged\"]}]]],[\"z-tree-list\",[[1,\"z-tree-list\",{\"items\":[1],\"htmlAriaLabelledby\":[513,\"html-aria-labelledby\"],\"htmlSectionTitle\":[513,\"html-section-title\"]},null,{\"items\":[\"watchItems\"]}]]],[\"z-carousel\",[[1,\"z-carousel\",{\"isLoading\":[4,\"is-loading\"],\"label\":[1],\"single\":[516],\"arrowsPosition\":[513,\"arrows-position\"],\"progressMode\":[1,\"progress-mode\"],\"fixedArrows\":[516,\"fixed-arrows\"],\"ghostLoadingHeight\":[2,\"ghost-loading-height\"],\"infinite\":[4],\"current\":[32],\"items\":[32],\"highlightedIndicator\":[32],\"canNavigatePrev\":[32],\"canNavigateNext\":[32]},null,{\"current\":[\"onIndexChange\"],\"single\":[\"onSingleModeChange\"],\"infinite\":[\"onInfiniteModeChange\"]}]]],[\"z-date-picker\",[[4,\"z-date-picker\",{\"datePickerId\":[1,\"date-picker-id\"],\"ariaLabel\":[1,\"aria-label\"],\"label\":[1],\"mode\":[1],\"name\":[1],\"value\":[1],\"flatpickrPosition\":[32],\"inputError\":[32]},[[2,\"keydown\",\"handleKeyDown\"]],{\"mode\":[\"setupPickers\"]}]]],[\"z-file\",[[2,\"z-file\",{\"fileNumber\":[2,\"file-number\"],\"fileName\":[1,\"file-name\"],\"allowPopover\":[32],\"popoverVisible\":[32]},[[1,\"mouseover\",\"onMouseOver\"],[1,\"mouseleave\",\"onMouseLeave\"],[0,\"interactiveIconClick\",\"onInteractiveIconClick\"]]]]],[\"z-range-picker\",[[0,\"z-range-picker\",{\"rangePickerId\":[1,\"range-picker-id\"],\"firstAriaLabel\":[1,\"first-aria-label\"],\"firstLabel\":[1,\"first-label\"],\"secondAriaLabel\":[1,\"second-aria-label\"],\"secondLabel\":[1,\"second-label\"],\"mode\":[1],\"firstPickerReadOnly\":[4,\"first-picker-read-only\"],\"lastPickerReadOnly\":[4,\"last-picker-read-only\"],\"firstPickerPlaceholder\":[1,\"first-picker-placeholder\"],\"lastPickerPlaceholder\":[1,\"last-picker-placeholder\"],\"flatpickrPosition\":[32],\"activeInput\":[32],\"firstInputError\":[32],\"lastInputError\":[32]},[[18,\"click\",\"handleClick\"],[18,\"keyup\",\"handleKeyDown\"]],{\"firstPickerReadOnly\":[\"setupFirstPickersReadOnly\"],\"lastPickerReadOnly\":[\"setupLastPickersReadOnly\"],\"mode\":[\"setupPickers\"]}]]],[\"z-td\",[[1,\"z-td\",{\"colspan\":[2],\"sticky\":[516],\"showMenu\":[513,\"show-menu\"],\"popoverPosition\":[1,\"popover-position\"],\"isMenuOpen\":[32]},null,{\"colspan\":[\"updateColspan\"]}]]],[\"z-th\",[[1,\"z-th\",{\"colspan\":[2],\"showMenu\":[513,\"show-menu\"],\"showSorting\":[513,\"show-sorting\"],\"sticky\":[516],\"sortDirection\":[1025,\"sort-direction\"],\"sorted\":[1540],\"popoverPosition\":[1,\"popover-position\"],\"isMenuOpen\":[32]},null,{\"colspan\":[\"updateColspan\"]}]]],[\"z-anchor-navigation\",[[4,\"z-anchor-navigation\",{\"hideUnselected\":[516,\"hide-unselected\"],\"autoCurrent\":[4,\"auto-current\"],\"collapsedLabel\":[1,\"collapsed-label\"],\"isCollapsed\":[516,\"is-collapsed\"],\"collapsed\":[32]}]]],[\"z-book-card\",[[1,\"z-book-card\",{\"variant\":[513],\"cover\":[1],\"operaTitle\":[1,\"opera-title\"],\"volumeTitle\":[1,\"volume-title\"],\"authors\":[1],\"isbn\":[1],\"isbnLabel\":[1,\"isbn-label\"],\"year\":[1],\"ebookUrl\":[1,\"ebook-url\"],\"fallbackCover\":[1,\"fallback-cover\"],\"titleHtmlTag\":[1,\"title-html-tag\"]}]]],[\"z-book-card-app\",[[1,\"z-book-card-app\",{\"logo\":[1],\"name\":[1],\"link\":[1],\"laz\":[4],\"info\":[1]}]]],[\"z-myz-card-alert\",[[1,\"z-myz-card-alert\",{\"iconname\":[1],\"contenttext\":[1],\"actiontext\":[1],\"type\":[1]}]]],[\"z-myz-card-info\",[[1,\"z-myz-card-info\",{\"data\":[1],\"htmltabindex\":[2],\"hiddenContent\":[32],\"tooltip\":[32]}]]],[\"z-myz-list\",[[1,\"z-myz-list\",{\"inputrawdata\":[1],\"list\":[1040]},null,{\"inputrawdata\":[\"oninputrawdataChange\"]}]]],[\"z-otp\",[[1,\"z-otp\",{\"inputNum\":[2,\"input-num\"],\"status\":[1],\"message\":[1]}]]],[\"z-accordion\",[[1,\"z-accordion\",{\"label\":[1],\"icon\":[1],\"size\":[513],\"isDisabled\":[516,\"is-disabled\"],\"open\":[1540],\"highlight\":[516],\"variant\":[513],\"shadow\":[516]},null,{\"isDisabled\":[\"onDisabledChange\"]}]]],[\"z-book-card-deprecated\",[[1,\"z-book-card-deprecated\",{\"variant\":[1],\"cover\":[1],\"operaTitle\":[1,\"opera-title\"],\"volumeTitle\":[1,\"volume-title\"],\"authors\":[1],\"isbn\":[1],\"isbnLabel\":[1,\"isbn-label\"],\"ribbon\":[1],\"ribbonIcon\":[1,\"ribbon-icon\"],\"ribbonInteractive\":[4,\"ribbon-interactive\"],\"borderless\":[4],\"fallbackCover\":[1,\"fallback-cover\"],\"operaTitleTag\":[1,\"opera-title-tag\"],\"isMobile\":[32],\"hasResources\":[32],\"showResources\":[32]}]]],[\"z-button-sort\",[[1,\"z-button-sort\",{\"buttonid\":[1],\"label\":[1],\"desclabel\":[1],\"counter\":[2],\"sortlabelasc\":[1],\"sortlabeldesc\":[1],\"isselected\":[1028],\"sortasc\":[1028],\"allowTooltip\":[32]}]]],[\"z-card\",[[1,\"z-card\",{\"variant\":[513],\"coverIcon\":[1,\"cover-icon\"],\"showShadow\":[516,\"show-shadow\"],\"clickable\":[516],\"hasCoverImage\":[32]}]]],[\"z-info-box\",[[1,\"z-info-box\",{\"boxid\":[1],\"isclosable\":[4]}]]],[\"z-menu\",[[1,\"z-menu\",{\"active\":[516],\"floating\":[516],\"open\":[1540],\"verticalContext\":[516,\"vertical-context\"],\"htmlTabindex\":[2,\"html-tabindex\"],\"hasHeader\":[32],\"hasContent\":[32],\"setFocus\":[64],\"focusLastItem\":[64]},[[4,\"click\",\"onItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChanged\"],\"htmlTabindex\":[\"setLabelA11yAttrs\"]}]]],[\"z-menu-deprecated\",[[1,\"z-menu-deprecated\",{\"active\":[516],\"floating\":[516],\"open\":[1540],\"verticalContext\":[516,\"vertical-context\"],\"hasHeader\":[32],\"hasContent\":[32]},[[4,\"click\",\"handleClick\"]],{\"open\":[\"onOpenChanged\"]}]]],[\"z-menu-section\",[[1,\"z-menu-section\",{\"active\":[516],\"htmlTabindex\":[2,\"html-tabindex\"],\"open\":[1028],\"hasItems\":[32],\"items\":[32],\"focusLastItem\":[64],\"setFocus\":[64]},[[0,\"keydown\",\"onItemsKeydown\"]],{\"open\":[\"onOpenChange\"],\"htmlTabindex\":[\"onTabindexChange\"]}]]],[\"z-menu-section-deprecated\",[[1,\"z-menu-section-deprecated\",{\"active\":[516],\"open\":[32],\"hasContent\":[32]},[[4,\"click\",\"handleClick\"]]]]],[\"z-myz-card-icon\",[[1,\"z-myz-card-icon\",{\"icon\":[1],\"isdisabled\":[4],\"ariaLabel\":[1,\"aria-label\"]}]]],[\"z-navigation-tabs\",[[4,\"z-navigation-tabs\",{\"ariaLabel\":[1,\"aria-label\"],\"orientation\":[513],\"size\":[513],\"selectedTab\":[1026,\"selected-tab\"],\"canNavigate\":[32],\"canNavigatePrev\":[32],\"canNavigateNext\":[32]},[[0,\"click\",\"handleTabClick\"],[0,\"focusin\",\"onTabFocusIn\"],[0,\"keydown\",\"navigateThroughTabs\"],[0,\"focusout\",\"onTabFocusOut\"]],{\"canNavigate\":[\"checkScrollEnabled\"],\"selectedTab\":[\"onTabSelected\"]}]]],[\"z-notification\",[[1,\"z-notification\",{\"contenticonname\":[1],\"actiontext\":[1],\"type\":[513],\"showclose\":[4],\"showshadow\":[516],\"sticky\":[516]}]]],[\"z-panel-elem\",[[6,\"z-panel-elem\",{\"elemid\":[1],\"imgurl\":[1],\"imgalt\":[1],\"linkicon\":[1],\"linklabel\":[1],\"url\":[1],\"target\":[1],\"isdisabled\":[4],\"descrSlotName\":[1,\"descr-slot-name\"]}]]],[\"z-result-card\",[[1,\"z-result-card\",{\"cardTitle\":[1,\"card-title\"],\"cardSubtitle\":[1,\"card-subtitle\"],\"authors\":[1],\"cover\":[1],\"hasMultipleCovers\":[4,\"has-multiple-covers\"],\"isInfoCard\":[4,\"is-info-card\"]}]]],[\"z-section-title\",[[1,\"z-section-title\",{\"dividerPosition\":[1,\"divider-position\"],\"uppercase\":[516]}]]],[\"z-slideshow\",[[1,\"z-slideshow\",{\"slideshowid\":[1],\"data\":[1],\"device\":[32],\"currentSlide\":[32]},null,{\"data\":[\"watchData\"]}]]],[\"z-stepper-item\",[[1,\"z-stepper-item\",{\"index\":[514],\"href\":[513],\"pressed\":[516],\"checked\":[516],\"disabled\":[516]}]]],[\"z-toast-notification\",[[1,\"z-toast-notification\",{\"heading\":[1],\"message\":[1],\"closebutton\":[4],\"autoclose\":[2],\"pauseonfocusloss\":[4],\"type\":[1],\"isdraggable\":[4],\"draggablepercentage\":[2],\"transition\":[1],\"percentage\":[32]},null,{\"isdraggable\":[\"watchPropIsdraggable\"],\"autoclose\":[\"watchPropAutoclose\"],\"pauseonfocusloss\":[\"watchPropPauseonfocusloss\"]}]]],[\"z-toggle-button\",[[1,\"z-toggle-button\",{\"label\":[1],\"isdisabled\":[4],\"avoidclick\":[4],\"opened\":[1028],\"ariaLabel\":[1,\"aria-label\"]}]]],[\"z-toggle-switch\",[[6,\"z-toggle-switch\",{\"disabled\":[516],\"labelPosition\":[513,\"label-position\"],\"checked\":[1028],\"htmlid\":[1]}]]],[\"z-tooltip\",[[1,\"z-tooltip\",{\"position\":[513],\"dark\":[516],\"open\":[1540],\"bindTo\":[1,\"bind-to\"],\"closable\":[4]},[[0,\"openChange\",\"onPopoverOpenChange\"]]]]],[\"z-tr\",[[1,\"z-tr\",{\"expandable\":[516],\"expanded\":[32],\"expandableContentId\":[32]},[[0,\"colspanchange\",\"updateColumns\"]],{\"expandable\":[\"updateColumns\"]}]]],[\"z-aria-alert\",[[4,\"z-aria-alert\",{\"mode\":[1]}]]],[\"z-avatar\",[[1,\"z-avatar\",{\"size\":[1],\"text\":[1],\"textColor\":[1,\"text-color\"],\"backgroundColor\":[1,\"background-color\"],\"image\":[1025]}]]],[\"z-cover-hero\",[[1,\"z-cover-hero\",{\"variant\":[513],\"contentPosition\":[513,\"content-position\"],\"preserveAspectRatio\":[516,\"preserve-aspect-ratio\"]},[[2,\"load\",\"onImgLoad\"]]]]],[\"z-logo\",[[1,\"z-logo\",{\"width\":[2],\"height\":[2],\"imageAlt\":[1,\"image-alt\"],\"link\":[1],\"targetBlank\":[4,\"target-blank\"],\"mobileLogo\":[4,\"mobile-logo\"]}]]],[\"z-myz-card-footer\",[[1,\"z-myz-card-footer\",{\"titolo\":[1],\"autori\":[1],\"isbn\":[1],\"faded\":[4],\"cardtype\":[1],\"opened\":[4],\"customContent\":[4,\"custom-content\"],\"isOpen\":[32],\"allowTooltipAuthors\":[32]},[[0,\"toggleClick\",\"handleToggle\"]]]]],[\"z-myz-card-footer-sections\",[[1,\"z-myz-card-footer-sections\"]]],[\"z-myz-card-list\",[[1,\"z-myz-card-list\",{\"listdata\":[1]}]]],[\"z-skip-to-content\",[[2,\"z-skip-to-content\",{\"variant\":[513],\"links\":[1025],\"visible\":[32],\"visibleLink\":[32]},[[4,\"focusout\",\"handleFocusOutSkipToContent\"],[4,\"focusin\",\"handleFocusSkipToContent\"]]]]],[\"z-stepper\",[[1,\"z-stepper\"]]],[\"z-table\",[[1,\"z-table\",{\"bordered\":[516],\"expandable\":[32]}]]],[\"z-tbody\",[[1,\"z-tbody\"]]],[\"z-tfoot\",[[1,\"z-tfoot\",{\"sticky\":[516]}]]],[\"z-thead\",[[1,\"z-thead\",{\"sticky\":[516],\"isFocusable\":[516,\"is-focusable\"]}]]],[\"z-toast-notification-list\",[[1,\"z-toast-notification-list\",{\"position\":[513],\"newestontop\":[4]},null,{\"newestontop\":[\"watchPropNewestontop\"]}]]],[\"z-visually-hidden\",[[1,\"z-visually-hidden\"]]],[\"z-chip\",[[6,\"z-chip\",{\"icon\":[1],\"type\":[513],\"interactiveIcon\":[513,\"interactive-icon\"],\"disabled\":[516],\"ariaLabel\":[1,\"aria-label\"]}]]],[\"z-info-reveal\",[[1,\"z-info-reveal\",{\"icon\":[1],\"position\":[513],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"size\":[513],\"open\":[32]},[[9,\"resize\",\"adjustPanelPosition\"],[10,\"keydown\",\"handleEscapeKey\"]],{\"position\":[\"adjustPanelPosition\"],\"open\":[\"adjustPanelPosition\"]}]]],[\"z-myz-list-item\",[[1,\"z-myz-list-item\",{\"text\":[1],\"link\":[1],\"linktarget\":[1],\"icon\":[1],\"listitemid\":[1],\"action\":[1],\"underlined\":[4]}]]],[\"z-alert\",[[1,\"z-alert\",{\"type\":[1]}]]],[\"z-ghost-loading\",[[1,\"z-ghost-loading\"]]],[\"z-dragdrop-area_2\",[[1,\"z-dragdrop-area\",{\"dragAndDropLabel\":[1,\"drag-and-drop-label\"],\"dragging\":[32]}],[1,\"z-modal\",{\"modalid\":[1],\"modaltitle\":[1],\"modalsubtitle\":[1],\"closeButtonLabel\":[1,\"close-button-label\"],\"alertdialog\":[4],\"closable\":[4],\"scrollInside\":[4,\"scroll-inside\"],\"lockPageScroll\":[4,\"lock-page-scroll\"],\"open\":[64],\"close\":[64]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"z-myz-card_4\",[[1,\"z-myz-card\",{\"faded\":[4],\"cardtype\":[1],\"ispressed\":[4],\"ishighlighted\":[4]}],[1,\"z-myz-card-body\"],[1,\"z-myz-card-cover\",{\"img\":[1],\"titolo\":[1],\"faded\":[4],\"defaultimg\":[1]}],[1,\"z-myz-card-header\",{\"titolo\":[1],\"faded\":[4],\"cardtype\":[1],\"allowTooltip\":[32]}]]],[\"z-popover\",[[1,\"z-popover\",{\"position\":[1537],\"open\":[1540],\"bindTo\":[1,\"bind-to\"],\"showArrow\":[516,\"show-arrow\"],\"center\":[516],\"closable\":[4],\"currentPosition\":[32]},[[8,\"keyup\",\"closePopoverWithKeyboard\"],[18,\"click\",\"handleOutsideClick\"]],{\"position\":[\"validatePosition\"],\"open\":[\"onOpen\"],\"bindTo\":[\"onBindingChange\"]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"z-app-header_12\",[[1,\"z-app-header\",{\"stuck\":[516],\"enableOffcanvas\":[1540,\"enable-offcanvas\"],\"enableSearch\":[516,\"enable-search\"],\"searchPlaceholder\":[1,\"search-placeholder\"],\"searchString\":[1025,\"search-string\"],\"searchPageUrl\":[1,\"search-page-url\"],\"enableZLogo\":[516,\"enable-z-logo\"],\"drawerOpen\":[1028,\"drawer-open\"],\"_stuck\":[32],\"menuLength\":[32],\"isMobile\":[32],\"isTablet\":[32]},[[5,\"focusin\",\"manageMenus\"],[5,\"click\",\"manageMenus\"],[1,\"keydown\",\"handleKeydown\"]],{\"_stuck\":[\"onStuck\"],\"drawerOpen\":[\"setMenuFloatingMode\"],\"stuck\":[\"onStuckChange\"]}],[1,\"z-searchbar\",{\"htmlid\":[513],\"preventSubmit\":[4,\"prevent-submit\"],\"value\":[1],\"placeholder\":[1],\"autocomplete\":[4],\"autocompleteMinChars\":[2,\"autocomplete-min-chars\"],\"resultsCount\":[2,\"results-count\"],\"searchHelperLabel\":[1,\"search-helper-label\"],\"resultsItems\":[1,\"results-items\"],\"sortResultsItems\":[4,\"sort-results-items\"],\"showSearchButton\":[4,\"show-search-button\"],\"searchButtonIconOnly\":[4,\"search-button-icon-only\"],\"size\":[1],\"variant\":[1],\"searchString\":[32],\"currResultsCount\":[32],\"showResults\":[32],\"isMobile\":[32],\"selectedItem\":[32]},[[4,\"click\",\"handleOutsideClick\"]],{\"resultsItems\":[\"watchItems\"],\"resultsCount\":[\"watchResultsCount\"],\"value\":[\"watchValue\"],\"searchString\":[\"watchSearchString\"],\"showResults\":[\"watchShowResults\"]}],[6,\"z-offcanvas\",{\"variant\":[513],\"open\":[1540],\"transitiondirection\":[513],\"skipLoadAnimation\":[4,\"skip-load-animation\"],\"skipAnimation\":[32]},[[2,\"click\",\"stopEvent\"],[2,\"focusin\",\"stopEvent\"]],{\"variant\":[\"handlePageOverflow\"],\"open\":[\"onOpenChanged\"]}],[6,\"z-tag\",{\"icon\":[1],\"expandable\":[4]}],[1,\"z-list-group\",{\"size\":[513],\"dividerType\":[513,\"divider-type\"],\"dividerSize\":[513,\"divider-size\"],\"dividerColor\":[513,\"divider-color\"],\"listType\":[513,\"list-type\"],\"hasTreeItems\":[4,\"has-tree-items\"]}],[1,\"z-list\",{\"size\":[513],\"listType\":[513,\"list-type\"],\"role\":[513]}],[1,\"z-list-element\",{\"alignButton\":[513,\"align-button\"],\"clickable\":[516],\"dividerColor\":[1,\"divider-color\"],\"dividerType\":[1,\"divider-type\"],\"dividerSize\":[1,\"divider-size\"],\"expandable\":[516],\"expandableStyle\":[1,\"expandable-style\"],\"listElementId\":[514,\"list-element-id\"],\"size\":[513],\"color\":[513],\"disabled\":[516],\"listElementPosition\":[513,\"list-element-position\"],\"listType\":[513,\"list-type\"],\"hasTreeItems\":[4,\"has-tree-items\"],\"role\":[513],\"htmlTabindex\":[2,\"html-tabindex\"],\"showInnerContent\":[32]},[[4,\"accessibleFocus\",\"accessibleFocusHandler\"]]],[2,\"z-input\",{\"htmlid\":[1],\"type\":[1],\"name\":[1],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaControls\":[1,\"aria-controls\"],\"ariaAutocomplete\":[1,\"aria-autocomplete\"],\"ariaActivedescendant\":[1,\"aria-activedescendant\"],\"value\":[1025],\"disabled\":[516],\"readonly\":[4],\"required\":[4],\"checked\":[1028],\"placeholder\":[1],\"htmltitle\":[1],\"status\":[1],\"message\":[8],\"labelPosition\":[1,\"label-position\"],\"autocomplete\":[1],\"role\":[1],\"hasclearicon\":[4],\"icon\":[1],\"min\":[2],\"minlength\":[2],\"max\":[2],\"maxlength\":[2],\"step\":[2],\"pattern\":[1],\"size\":[513],\"isTyping\":[32],\"passwordHidden\":[32],\"isChecked\":[64]},[[4,\"inputCheck\",\"inputCheckListener\"]]],[1,\"z-input-message\",{\"message\":[1],\"status\":[513],\"disabled\":[516],\"statusRole\":[32]},null,{\"message\":[\"onMessageChange\"],\"status\":[\"onMessageChange\"]}],[2,\"z-divider\",{\"size\":[1],\"color\":[1],\"orientation\":[1]}],[6,\"z-button\",{\"ariaLabel\":[1,\"aria-label\"],\"role\":[1],\"htmlrole\":[1],\"href\":[1],\"target\":[1],\"htmlid\":[1],\"name\":[1],\"disabled\":[516],\"type\":[1],\"variant\":[513],\"icon\":[1],\"iconPosition\":[513,\"icon-position\"],\"size\":[513]}],[1,\"z-icon\",{\"name\":[1],\"height\":[8],\"width\":[8],\"iconid\":[1],\"fill\":[1]}]]],[\"z-app-header-deprecated\",[[1,\"z-app-header-deprecated\",{\"stuck\":[516],\"hero\":[1],\"overlay\":[516],\"flow\":[513],\"drawerOpen\":[516,\"drawer-open\"],\"enableSearch\":[516,\"enable-search\"],\"searchPlaceholder\":[1,\"search-placeholder\"],\"searchString\":[1025,\"search-string\"],\"searchPageUrl\":[1,\"search-page-url\"],\"_stuck\":[32],\"currentViewport\":[32],\"menuLength\":[32]},[[9,\"resize\",\"evaluateViewport\"]],{\"_stuck\":[\"onStuck\"],\"drawerOpen\":[\"setMenuFloatingMode\"],\"stuck\":[\"onStuckMode\"]}]]],[\"z-select\",[[2,\"z-select\",{\"htmlid\":[1],\"items\":[1],\"name\":[1],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"readonly\":[4],\"placeholder\":[1],\"htmltitle\":[1],\"status\":[1],\"message\":[8],\"autocomplete\":[4],\"noresultslabel\":[1],\"hasGroupItems\":[4,\"has-group-items\"],\"hasTreeItems\":[4,\"has-tree-items\"],\"showChildrenOfMatchingParent\":[4,\"show-children-of-matching-parent\"],\"isfixed\":[4],\"resetItem\":[1,\"reset-item\"],\"size\":[1],\"isOpen\":[32],\"selectedItem\":[32],\"focusedItemId\":[32],\"searchString\":[32],\"flattenedList\":[32],\"getSelectedItem\":[64],\"getValue\":[64],\"setValue\":[64]},[[0,\"ariaDescendantFocus\",\"getFocusedItemHandler\"]],{\"items\":[\"watchItems\"]}]]],[\"z-breadcrumb\",[[1,\"z-breadcrumb\",{\"pathStyle\":[513,\"path-style\"],\"homepageVariant\":[1,\"homepage-variant\"],\"maxNodesToShow\":[2,\"max-nodes-to-show\"],\"preventFollowUrl\":[4,\"prevent-follow-url\"],\"overflowMenuItemRows\":[2,\"overflow-menu-item-rows\"],\"truncateChar\":[2,\"truncate-char\"],\"viewPortWidth\":[32],\"hasOverflow\":[32],\"popoverEllipsisOpen\":[32]},[[9,\"resize\",\"handleResize\"]],{\"maxNodesToShow\":[\"handlePropChange\"],\"viewPortWidth\":[\"handleResizeUp\"]}]]],[\"z-combobox\",[[1,\"z-combobox\",{\"inputid\":[1],\"items\":[1],\"label\":[1],\"disabled\":[516],\"hassearch\":[4],\"searchlabel\":[1],\"searchplaceholder\":[1],\"searchtitle\":[1],\"noresultslabel\":[1],\"isopen\":[1028],\"isfixed\":[4],\"closesearchtext\":[1],\"hascheckall\":[4],\"checkalltext\":[1],\"uncheckalltext\":[1],\"maxcheckableitems\":[2],\"hasgroupitems\":[4],\"size\":[1],\"searchValue\":[32],\"selectedCounter\":[32],\"renderItemsList\":[32],\"focusedItemId\":[32],\"checkboxes\":[32]},null,{\"items\":[\"watchItems\"],\"searchValue\":[\"watchSearchValue\"],\"checkboxes\":[\"watchCheckboxes\"]}]]],[\"z-myz-card-dictionary\",[[1,\"z-myz-card-dictionary\",{\"name\":[1],\"cover\":[1],\"disabled\":[4],\"flipped\":[1028],\"flipbuttonlabel\":[1],\"hideinfobtn\":[4]},[[0,\"flipCard\",\"handleFlipCard\"]]]]],[\"z-file-upload\",[[6,\"z-file-upload\",{\"type\":[513],\"buttonVariant\":[1,\"button-variant\"],\"acceptedFormat\":[1,\"accepted-format\"],\"fileMaxSize\":[2,\"file-max-size\"],\"mainTitle\":[1,\"main-title\"],\"description\":[1],\"uploadBtnLabel\":[1,\"upload-btn-label\"],\"dragAndDropLabel\":[1,\"drag-and-drop-label\"],\"allowedFilesMessage\":[1,\"allowed-files-message\"],\"uploadClickableMessage\":[1,\"upload-clickable-message\"],\"uploadMessage\":[1,\"upload-message\"],\"errorModalTitle\":[1,\"error-modal-title\"],\"errorModalMessage\":[1,\"error-modal-message\"],\"uploadedFilesLabel\":[1,\"uploaded-files-label\"],\"hasFileSection\":[4,\"has-file-section\"],\"inputName\":[1,\"input-name\"],\"showErrors\":[4,\"show-errors\"],\"_type\":[32],\"files\":[32],\"invalidFiles\":[32],\"input\":[32],\"getFiles\":[64],\"removeFile\":[64]},[[0,\"removeFile\",\"onFileRemoved\"],[0,\"fileDropped\",\"fileDroppedListener\"]]]]],[\"z-pagination\",[[0,\"z-pagination\",{\"label\":[1],\"navArrows\":[4,\"nav-arrows\"],\"totalPages\":[2,\"total-pages\"],\"skip\":[2],\"edges\":[4],\"split\":[2],\"visiblePages\":[2,\"visible-pages\"],\"currentPage\":[1026,\"current-page\"],\"goToPage\":[4,\"go-to-page\"],\"_visiblePages\":[32],\"isMobile\":[32],\"goToPageValue\":[32]},[[9,\"resize\",\"onResize\"]],{\"_visiblePages\":[\"setPagesContainerWidth\"],\"visiblePages\":[\"setVisiblePages\"],\"currentPage\":[\"onPageChanged\"],\"split\":[\"onSplitChanged\"]}]]],[\"z-tree-list\",[[1,\"z-tree-list\",{\"items\":[1],\"htmlAriaLabelledby\":[513,\"html-aria-labelledby\"],\"htmlSectionTitle\":[513,\"html-section-title\"]},null,{\"items\":[\"watchItems\"]}]]],[\"z-carousel\",[[1,\"z-carousel\",{\"isLoading\":[4,\"is-loading\"],\"label\":[1],\"single\":[516],\"arrowsPosition\":[513,\"arrows-position\"],\"progressMode\":[1,\"progress-mode\"],\"fixedArrows\":[516,\"fixed-arrows\"],\"ghostLoadingHeight\":[2,\"ghost-loading-height\"],\"infinite\":[4],\"current\":[32],\"items\":[32],\"highlightedIndicator\":[32],\"canNavigatePrev\":[32],\"canNavigateNext\":[32]},null,{\"current\":[\"onIndexChange\"],\"single\":[\"onSingleModeChange\"],\"infinite\":[\"onInfiniteModeChange\"]}]]],[\"z-date-picker\",[[4,\"z-date-picker\",{\"datePickerId\":[1,\"date-picker-id\"],\"ariaLabel\":[1,\"aria-label\"],\"label\":[1],\"mode\":[1],\"name\":[1],\"value\":[1],\"flatpickrPosition\":[32],\"inputError\":[32]},[[2,\"keydown\",\"handleKeyDown\"]],{\"mode\":[\"setupPickers\"]}]]],[\"z-file\",[[2,\"z-file\",{\"fileNumber\":[2,\"file-number\"],\"fileName\":[1,\"file-name\"],\"allowPopover\":[32],\"popoverVisible\":[32]},[[1,\"mouseover\",\"onMouseOver\"],[1,\"mouseleave\",\"onMouseLeave\"],[0,\"interactiveIconClick\",\"onInteractiveIconClick\"]]]]],[\"z-range-picker\",[[0,\"z-range-picker\",{\"rangePickerId\":[1,\"range-picker-id\"],\"firstAriaLabel\":[1,\"first-aria-label\"],\"firstLabel\":[1,\"first-label\"],\"secondAriaLabel\":[1,\"second-aria-label\"],\"secondLabel\":[1,\"second-label\"],\"mode\":[1],\"firstPickerReadOnly\":[4,\"first-picker-read-only\"],\"lastPickerReadOnly\":[4,\"last-picker-read-only\"],\"firstPickerPlaceholder\":[1,\"first-picker-placeholder\"],\"lastPickerPlaceholder\":[1,\"last-picker-placeholder\"],\"flatpickrPosition\":[32],\"activeInput\":[32],\"firstInputError\":[32],\"lastInputError\":[32]},[[18,\"click\",\"handleClick\"],[18,\"keyup\",\"handleKeyDown\"]],{\"firstPickerReadOnly\":[\"setupFirstPickersReadOnly\"],\"lastPickerReadOnly\":[\"setupLastPickersReadOnly\"],\"mode\":[\"setupPickers\"]}]]],[\"z-td\",[[1,\"z-td\",{\"colspan\":[2],\"sticky\":[516],\"showMenu\":[513,\"show-menu\"],\"popoverPosition\":[1,\"popover-position\"],\"isMenuOpen\":[32]},null,{\"colspan\":[\"updateColspan\"]}]]],[\"z-th\",[[1,\"z-th\",{\"colspan\":[2],\"showMenu\":[513,\"show-menu\"],\"showSorting\":[513,\"show-sorting\"],\"sticky\":[516],\"sortDirection\":[1025,\"sort-direction\"],\"sorted\":[1540],\"popoverPosition\":[1,\"popover-position\"],\"isMenuOpen\":[32]},null,{\"colspan\":[\"updateColspan\"]}]]],[\"z-anchor-navigation\",[[4,\"z-anchor-navigation\",{\"hideUnselected\":[516,\"hide-unselected\"],\"autoCurrent\":[4,\"auto-current\"],\"collapsedLabel\":[1,\"collapsed-label\"],\"isCollapsed\":[516,\"is-collapsed\"],\"collapsed\":[32]}]]],[\"z-book-card\",[[1,\"z-book-card\",{\"variant\":[513],\"cover\":[1],\"operaTitle\":[1,\"opera-title\"],\"volumeTitle\":[1,\"volume-title\"],\"authors\":[1],\"isbn\":[1],\"isbnLabel\":[1,\"isbn-label\"],\"year\":[1],\"ebookUrl\":[1,\"ebook-url\"],\"fallbackCover\":[1,\"fallback-cover\"],\"titleHtmlTag\":[1,\"title-html-tag\"]}]]],[\"z-book-card-app\",[[1,\"z-book-card-app\",{\"logo\":[1],\"name\":[1],\"link\":[1],\"laz\":[4],\"info\":[1]}]]],[\"z-myz-card-alert\",[[1,\"z-myz-card-alert\",{\"iconname\":[1],\"contenttext\":[1],\"actiontext\":[1],\"type\":[1]}]]],[\"z-myz-card-info\",[[1,\"z-myz-card-info\",{\"data\":[1],\"htmltabindex\":[2],\"hiddenContent\":[32],\"tooltip\":[32]}]]],[\"z-myz-list\",[[1,\"z-myz-list\",{\"inputrawdata\":[1],\"list\":[1040]},null,{\"inputrawdata\":[\"oninputrawdataChange\"]}]]],[\"z-otp\",[[1,\"z-otp\",{\"inputNum\":[2,\"input-num\"],\"status\":[1],\"message\":[1]}]]],[\"z-accordion\",[[1,\"z-accordion\",{\"label\":[1],\"icon\":[1],\"size\":[513],\"isDisabled\":[516,\"is-disabled\"],\"open\":[1540],\"highlight\":[516],\"variant\":[513],\"shadow\":[516]},null,{\"isDisabled\":[\"onDisabledChange\"]}]]],[\"z-book-card-deprecated\",[[1,\"z-book-card-deprecated\",{\"variant\":[1],\"cover\":[1],\"operaTitle\":[1,\"opera-title\"],\"volumeTitle\":[1,\"volume-title\"],\"authors\":[1],\"isbn\":[1],\"isbnLabel\":[1,\"isbn-label\"],\"ribbon\":[1],\"ribbonIcon\":[1,\"ribbon-icon\"],\"ribbonInteractive\":[4,\"ribbon-interactive\"],\"borderless\":[4],\"fallbackCover\":[1,\"fallback-cover\"],\"operaTitleTag\":[1,\"opera-title-tag\"],\"isMobile\":[32],\"hasResources\":[32],\"showResources\":[32]}]]],[\"z-button-sort\",[[1,\"z-button-sort\",{\"buttonid\":[1],\"label\":[1],\"desclabel\":[1],\"counter\":[2],\"sortlabelasc\":[1],\"sortlabeldesc\":[1],\"isselected\":[1028],\"sortasc\":[1028],\"allowTooltip\":[32]}]]],[\"z-card\",[[1,\"z-card\",{\"variant\":[513],\"coverIcon\":[1,\"cover-icon\"],\"showShadow\":[516,\"show-shadow\"],\"clickable\":[516],\"hasCoverImage\":[32]}]]],[\"z-info-box\",[[1,\"z-info-box\",{\"boxid\":[1],\"isclosable\":[4]}]]],[\"z-menu\",[[1,\"z-menu\",{\"active\":[516],\"floating\":[516],\"open\":[1540],\"verticalContext\":[516,\"vertical-context\"],\"htmlTabindex\":[2,\"html-tabindex\"],\"hasHeader\":[32],\"hasContent\":[32],\"setFocus\":[64],\"focusLastItem\":[64]},[[4,\"click\",\"onItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChanged\"],\"htmlTabindex\":[\"setLabelA11yAttrs\"]}]]],[\"z-menu-deprecated\",[[1,\"z-menu-deprecated\",{\"active\":[516],\"floating\":[516],\"open\":[1540],\"verticalContext\":[516,\"vertical-context\"],\"hasHeader\":[32],\"hasContent\":[32]},[[4,\"click\",\"handleClick\"]],{\"open\":[\"onOpenChanged\"]}]]],[\"z-menu-section\",[[1,\"z-menu-section\",{\"active\":[516],\"htmlTabindex\":[2,\"html-tabindex\"],\"open\":[1028],\"hasItems\":[32],\"items\":[32],\"focusLastItem\":[64],\"setFocus\":[64]},[[0,\"keydown\",\"onItemsKeydown\"]],{\"open\":[\"onOpenChange\"],\"htmlTabindex\":[\"onTabindexChange\"]}]]],[\"z-menu-section-deprecated\",[[1,\"z-menu-section-deprecated\",{\"active\":[516],\"open\":[32],\"hasContent\":[32]},[[4,\"click\",\"handleClick\"]]]]],[\"z-myz-card-icon\",[[1,\"z-myz-card-icon\",{\"icon\":[1],\"isdisabled\":[4],\"ariaLabel\":[1,\"aria-label\"]}]]],[\"z-navigation-tabs\",[[4,\"z-navigation-tabs\",{\"ariaLabel\":[1,\"aria-label\"],\"orientation\":[513],\"size\":[513],\"selectedTab\":[1026,\"selected-tab\"],\"canNavigate\":[32],\"canNavigatePrev\":[32],\"canNavigateNext\":[32]},[[0,\"click\",\"handleTabClick\"],[0,\"focusin\",\"onTabFocusIn\"],[0,\"keydown\",\"navigateThroughTabs\"],[0,\"focusout\",\"onTabFocusOut\"]],{\"canNavigate\":[\"checkScrollEnabled\"],\"selectedTab\":[\"onTabSelected\"]}]]],[\"z-notification\",[[1,\"z-notification\",{\"contenticonname\":[1],\"actiontext\":[1],\"type\":[513],\"showclose\":[4],\"showshadow\":[516],\"sticky\":[516]}]]],[\"z-panel-elem\",[[6,\"z-panel-elem\",{\"elemid\":[1],\"imgurl\":[1],\"imgalt\":[1],\"linkicon\":[1],\"linklabel\":[1],\"url\":[1],\"target\":[1],\"isdisabled\":[4],\"descrSlotName\":[1,\"descr-slot-name\"]}]]],[\"z-result-card\",[[1,\"z-result-card\",{\"cardTitle\":[1,\"card-title\"],\"cardSubtitle\":[1,\"card-subtitle\"],\"authors\":[1],\"cover\":[1],\"fallbackCover\":[1,\"fallback-cover\"],\"hasMultipleCovers\":[4,\"has-multiple-covers\"],\"isInfoCard\":[4,\"is-info-card\"]}]]],[\"z-section-title\",[[1,\"z-section-title\",{\"dividerPosition\":[1,\"divider-position\"],\"uppercase\":[516]}]]],[\"z-slideshow\",[[1,\"z-slideshow\",{\"slideshowid\":[1],\"data\":[1],\"device\":[32],\"currentSlide\":[32]},null,{\"data\":[\"watchData\"]}]]],[\"z-stepper-item\",[[1,\"z-stepper-item\",{\"index\":[514],\"href\":[513],\"pressed\":[516],\"checked\":[516],\"disabled\":[516]}]]],[\"z-toast-notification\",[[1,\"z-toast-notification\",{\"heading\":[1],\"message\":[1],\"closebutton\":[4],\"autoclose\":[2],\"pauseonfocusloss\":[4],\"type\":[1],\"isdraggable\":[4],\"draggablepercentage\":[2],\"transition\":[1],\"percentage\":[32]},null,{\"isdraggable\":[\"watchPropIsdraggable\"],\"autoclose\":[\"watchPropAutoclose\"],\"pauseonfocusloss\":[\"watchPropPauseonfocusloss\"]}]]],[\"z-toggle-button\",[[1,\"z-toggle-button\",{\"label\":[1],\"isdisabled\":[4],\"avoidclick\":[4],\"opened\":[1028],\"ariaLabel\":[1,\"aria-label\"]}]]],[\"z-toggle-switch\",[[6,\"z-toggle-switch\",{\"disabled\":[516],\"labelPosition\":[513,\"label-position\"],\"checked\":[1028],\"htmlid\":[1]}]]],[\"z-tooltip\",[[1,\"z-tooltip\",{\"position\":[513],\"dark\":[516],\"open\":[1540],\"bindTo\":[1,\"bind-to\"],\"closable\":[4]},[[0,\"openChange\",\"onPopoverOpenChange\"]]]]],[\"z-tr\",[[1,\"z-tr\",{\"expandable\":[516],\"expanded\":[32],\"expandableContentId\":[32]},[[0,\"colspanchange\",\"updateColumns\"]],{\"expandable\":[\"updateColumns\"]}]]],[\"z-aria-alert\",[[4,\"z-aria-alert\",{\"mode\":[1]}]]],[\"z-avatar\",[[1,\"z-avatar\",{\"size\":[1],\"text\":[1],\"textColor\":[1,\"text-color\"],\"backgroundColor\":[1,\"background-color\"],\"image\":[1025]}]]],[\"z-cover-hero\",[[1,\"z-cover-hero\",{\"variant\":[513],\"contentPosition\":[513,\"content-position\"],\"preserveAspectRatio\":[516,\"preserve-aspect-ratio\"]},[[2,\"load\",\"onImgLoad\"]]]]],[\"z-logo\",[[1,\"z-logo\",{\"width\":[2],\"height\":[2],\"imageAlt\":[1,\"image-alt\"],\"link\":[1],\"targetBlank\":[4,\"target-blank\"],\"mobileLogo\":[4,\"mobile-logo\"]}]]],[\"z-myz-card-footer\",[[1,\"z-myz-card-footer\",{\"titolo\":[1],\"autori\":[1],\"isbn\":[1],\"faded\":[4],\"cardtype\":[1],\"opened\":[4],\"customContent\":[4,\"custom-content\"],\"isOpen\":[32],\"allowTooltipAuthors\":[32]},[[0,\"toggleClick\",\"handleToggle\"]]]]],[\"z-myz-card-footer-sections\",[[1,\"z-myz-card-footer-sections\"]]],[\"z-myz-card-list\",[[1,\"z-myz-card-list\",{\"listdata\":[1]}]]],[\"z-skip-to-content\",[[2,\"z-skip-to-content\",{\"variant\":[513],\"links\":[1025],\"visible\":[32],\"visibleLink\":[32]},[[4,\"focusout\",\"handleFocusOutSkipToContent\"],[4,\"focusin\",\"handleFocusSkipToContent\"]]]]],[\"z-stepper\",[[1,\"z-stepper\"]]],[\"z-table\",[[1,\"z-table\",{\"bordered\":[516],\"expandable\":[32]}]]],[\"z-tbody\",[[1,\"z-tbody\"]]],[\"z-tfoot\",[[1,\"z-tfoot\",{\"sticky\":[516]}]]],[\"z-thead\",[[1,\"z-thead\",{\"sticky\":[516],\"isFocusable\":[516,\"is-focusable\"]}]]],[\"z-toast-notification-list\",[[1,\"z-toast-notification-list\",{\"position\":[513],\"newestontop\":[4]},null,{\"newestontop\":[\"watchPropNewestontop\"]}]]],[\"z-visually-hidden\",[[1,\"z-visually-hidden\"]]],[\"z-chip\",[[6,\"z-chip\",{\"icon\":[1],\"type\":[513],\"interactiveIcon\":[513,\"interactive-icon\"],\"disabled\":[516],\"ariaLabel\":[1,\"aria-label\"]}]]],[\"z-info-reveal\",[[1,\"z-info-reveal\",{\"icon\":[1],\"position\":[513],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"size\":[513],\"open\":[32]},[[9,\"resize\",\"adjustPanelPosition\"],[10,\"keydown\",\"handleEscapeKey\"]],{\"position\":[\"adjustPanelPosition\"],\"open\":[\"adjustPanelPosition\"]}]]],[\"z-myz-list-item\",[[1,\"z-myz-list-item\",{\"text\":[1],\"link\":[1],\"linktarget\":[1],\"icon\":[1],\"listitemid\":[1],\"action\":[1],\"underlined\":[4]}]]],[\"z-alert\",[[1,\"z-alert\",{\"type\":[1]}]]],[\"z-ghost-loading\",[[1,\"z-ghost-loading\"]]],[\"z-dragdrop-area_2\",[[1,\"z-dragdrop-area\",{\"dragAndDropLabel\":[1,\"drag-and-drop-label\"],\"dragging\":[32]}],[1,\"z-modal\",{\"modalid\":[1],\"modaltitle\":[1],\"modalsubtitle\":[1],\"closeButtonLabel\":[1,\"close-button-label\"],\"alertdialog\":[4],\"closable\":[4],\"scrollInside\":[4,\"scroll-inside\"],\"lockPageScroll\":[4,\"lock-page-scroll\"],\"open\":[64],\"close\":[64]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"z-myz-card_4\",[[1,\"z-myz-card\",{\"faded\":[4],\"cardtype\":[1],\"ispressed\":[4],\"ishighlighted\":[4]}],[1,\"z-myz-card-body\"],[1,\"z-myz-card-cover\",{\"img\":[1],\"titolo\":[1],\"faded\":[4],\"defaultimg\":[1]}],[1,\"z-myz-card-header\",{\"titolo\":[1],\"faded\":[4],\"cardtype\":[1],\"allowTooltip\":[32]}]]],[\"z-popover\",[[1,\"z-popover\",{\"position\":[1537],\"open\":[1540],\"bindTo\":[1,\"bind-to\"],\"showArrow\":[516,\"show-arrow\"],\"center\":[516],\"closable\":[4],\"currentPosition\":[32]},[[8,\"keyup\",\"closePopoverWithKeyboard\"],[18,\"click\",\"handleOutsideClick\"]],{\"position\":[\"validatePosition\"],\"open\":[\"onOpen\"],\"bindTo\":[\"onBindingChange\"]}]]]]"), options);
 });
 
 //# sourceMappingURL=web-components-library.js.map

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { i as img } from './placeholder-cover-9346be8f.js';
 import { X as BookCardVariant, e as ControlSize } from './index-2a6324f8.js';
 
 const stylesCss$1 = ":host{--z-book-card-portrait-cover-height:378px;--z-book-card-title-lines:2;--z-book-card-title-word-break:initial;--z-book-card-subtitle-lines:1;--z-book-card-subtitle-word-break:break-all;--z-book-card-authors-lines:1;--z-book-card-authors-word-break:break-all;display:flex;width:304px;box-sizing:border-box;flex-direction:column;border:solid var(--border-size-medium) var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-default-text);font-family:var(--font-family-sans)}:host .main-content{display:flex;height:100%;box-sizing:border-box;flex-direction:column;padding:var(--space-unit);gap:var(--space-unit)}:host .main-content .cover{position:relative;display:flex;overflow:hidden;height:var(--z-book-card-portrait-cover-height);align-items:flex-end;background:var(--color-white);border-radius:var(--border-radius)}:host .main-content .cover:focus-within{border-radius:var(--border-radius);box-shadow:var(--shadow-focus-primary);outline:none}:host .main-content .cover a{display:inline-flex;outline:none}:host .main-content .cover img{max-width:100%;max-height:100%;outline:none}::slotted([slot=\"coverOverlay\"]){position:absolute;bottom:0;overflow:hidden;width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--avatar-C19);color:var(--color-white)}:host .main-content .cover ::slotted([slot=\"coverOverlay\"]){min-height:80px;max-height:336px}:host .main-content .card-info{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:var(--space-unit)}:host .main-content .card-info .top{display:flex;flex-direction:column;gap:calc(var(--space-unit) * 2)}:host .main-content .card-info .top ::slotted([slot=\"tags\"]){display:flex;flex-wrap:wrap;gap:var(--space-unit)}:host .main-content .card-info .top ::slotted([slot=\"data\"]){display:flex;justify-content:space-between}:host .main-content .card-info .top .ellipsis{display:-webkit-box;overflow:hidden;height:1.4rem;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;line-height:1.4rem;text-overflow:ellipsis;word-break:break-all}:host .main-content .card-info .top .ellipsis.opera-title{height:calc(1.5 * var(--z-book-card-title-lines)) rem;-webkit-line-clamp:var(--z-book-card-title-lines);line-clamp:var(--z-book-card-title-lines);line-height:1.5rem;word-break:var(--z-book-card-title-word-break)}:host .main-content .card-info .top .ellipsis.volume-title{height:calc(1.4 * var(--z-book-card-subtitle-lines)) rem;-webkit-line-clamp:var(--z-book-card-subtitle-lines);line-clamp:var(--z-book-card-subtitle-lines);line-height:1.4rem;word-break:var(--z-book-card-subtitle-word-break)}:host .main-content .card-info .top .ellipsis.authors{height:calc(1.4 * var(--z-book-card-authors-lines)) rem;-webkit-line-clamp:var(--z-book-card-authors-lines);line-clamp:var(--z-book-card-authors-lines);line-height:1.4rem;word-break:var(--z-book-card-authors-word-break)}:host .main-content .card-info .top .opera-title *{all:unset}:host .main-content .cta-wrapper{display:flex;justify-content:space-between;gap:calc(var(--space-unit) / 2)}:host .main-content .card-info .top .link-chip-wrapper{display:flex;justify-content:space-between}:host .main-content .card-info .bottom .ebook{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--space-unit);background-color:var(--color-primary02);border-radius:var(--border-radius);gap:var(--space-unit)}:host .main-content .card-info .bottom .ebook .app-name{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) 0;font-family:var(--font-family-serif);gap:calc(var(--space-unit) / 2)}:host .main-content .card-info .bottom .ebook .app-name .ebook-logo{width:1.5rem;height:1.5rem;content:url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}:host([variant=\"landscape\"]){width:635px;min-height:max(332px, 20.75rem);padding:0}:host([variant=\"landscape\"]) .main-content{min-height:max(332px, 20.75rem);box-sizing:border-box;flex-direction:row;padding:calc(var(--space-unit) * 2);gap:calc(var(--space-unit) * 2)}:host([variant=\"landscape\"]) .main-content .cover{display:flex;overflow:hidden;width:221px;height:300px;margin:0}:host([variant=\"landscape\"]) .main-content .cover ::slotted([slot=\"coverOverlay\"]){min-height:80px;max-height:256px}:host([variant=\"landscape\"]) .main-content .card-info{gap:calc(var(--space-unit) / 2)}:host([variant=\"landscape\"]) .main-content .card-info .top{gap:calc(var(--space-unit) / 2)}@media (max-width: 767px){:host([variant=\"portrait\"]){width:100%;max-width:400px}}";
@@ -42,6 +43,9 @@ const ZBookCard = class {
                 if (this.fallbackCover) {
                     this.cover = this.fallbackCover;
                 }
+                else {
+                    this.cover = img;
+                }
             }, "aria-hidden": "true" }));
         return (h("div", { class: "cover" }, this.ebookUrl ? (h("a", { tabIndex: 0, class: "cover-link", href: this.ebookUrl, onClick: () => this.emitCoverClick(), target: "_blank" }, coverImg)) : (coverImg), h("slot", { name: "coverOverlay" })));
     }
@@ -83,7 +87,7 @@ const ZBookCard = class {
         return h("slot", { name: "cta" });
     }
     render() {
-        return (h(Host, { key: '390282d1103ee34c1799ac6c3827ba735932d748' }, h("div", { key: '0498613fb827c04d69a8f3ae622b038a96f30f35', class: "main-content" }, this.renderCover(), h("div", { key: '7b548cf67997b7654ac115e7e0c8610ab0364774', class: "card-info" }, h("div", { key: '9cc219c999f12b7037b87dee93c6a4003451c532', class: "top" }, h("div", { key: '7e0fda8d8e4db8f739ab1fb84ee52113b4726289' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("slot", { key: 'a111f6a3112733c7566613f1f91aae886c3664d2', name: "tags" }), h("slot", { key: '648c50aaae28a643bad13762cfa32c36e2f68f9a', name: "data" })), h("slot", { key: '5d531aae5e1b347b05186088a3362752625b58ed', name: "ebook" }, !!this.ebookUrl && h("div", { key: 'd35832672681fc37974fc5ddaa2f2c421bdafe99', class: "bottom" }, this.renderEbook())))), h("slot", { key: 'ffa28f796577b77ad006f223182b3742a3bc4197', name: "apps" })));
+        return (h(Host, { key: 'b8b37f10e4c09f1bd9314cf8fb1b8f752ae9c47e' }, h("div", { key: '70f04ae7125d557d2911a6ef4e44d1903128bde5', class: "main-content" }, this.renderCover(), h("div", { key: '96a357c922d91e09c31f0fdf4cd7283e8a1ed9a7', class: "card-info" }, h("div", { key: 'dd12a24cdc1fadaa877406b9662b91ba0de8aa27', class: "top" }, h("div", { key: '42a1245295cf5659f51b39516963e0104cba4cef' }, this.renderYear(), this.renderAuthors(), this.renderOperaTitle(), this.renderVolumeTitle(), this.renderIsbn()), h("slot", { key: 'b69e77dc77c971019ecf3bb30d0bf211ccc794f9', name: "tags" }), h("slot", { key: '53202f9466707bdafcc6882c563978b339e61335', name: "data" })), h("slot", { key: '646df6b2a349a30c2ab9cf0a3c30919157cced93', name: "ebook" }, !!this.ebookUrl && h("div", { key: 'a3707624b5e428a472ff91a32e03bd72be7e3f57', class: "bottom" }, this.renderEbook())))), h("slot", { key: 'a5d2a636f6848f46e1f48117efbdce91673c532b', name: "apps" })));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"z-book-card.entry.js","mappings":"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","names":["stylesCss"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n  --z-book-card-portrait-cover-height: 378px;\n  --z-book-card-title-lines: 2;\n  --z-book-card-title-word-break: initial;\n  --z-book-card-subtitle-lines: 1;\n  --z-book-card-subtitle-word-break: break-all;\n  --z-book-card-authors-lines: 1;\n  --z-book-card-authors-word-break: break-all;\n\n  display: flex;\n  width: 304px;\n  box-sizing: border-box;\n  flex-direction: column;\n  border: solid var(--border-size-medium) var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n}\n\n:host .main-content {\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: var(--space-unit);\n  gap: var(--space-unit);\n}\n\n:host .main-content .cover {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  height: var(--z-book-card-portrait-cover-height);\n  align-items: flex-end;\n  background: var(--color-white);\n  border-radius: var(--border-radius);\n}\n\n:host .main-content .cover:focus-within {\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host .main-content .cover a {\n  display: inline-flex;\n  outline: none;\n}\n\n:host .main-content .cover img {\n  max-width: 100%;\n  max-height: 100%;\n  outline: none;\n}\n\n::slotted([slot=\"coverOverlay\"]) {\n  position: absolute;\n  bottom: 0;\n  overflow: hidden;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-unit);\n  background-color: var(--avatar-C19);\n  color: var(--color-white);\n}\n\n:host .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n  min-height: 80px;\n  max-height: 336px;\n}\n\n:host .main-content .card-info {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--space-unit) * 2);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"tags\"]) {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"data\"]) {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host .main-content .card-info .top .ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  height: 1.4rem;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  line-height: 1.4rem;\n  text-overflow: ellipsis;\n  word-break: break-all;\n}\n\n:host .main-content .card-info .top .ellipsis.opera-title {\n  height: calc(1.5 * var(--z-book-card-title-lines)) rem;\n  -webkit-line-clamp: var(--z-book-card-title-lines);\n  line-clamp: var(--z-book-card-title-lines);\n  line-height: 1.5rem;\n  word-break: var(--z-book-card-title-word-break);\n}\n\n:host .main-content .card-info .top .ellipsis.volume-title {\n  height: calc(1.4 * var(--z-book-card-subtitle-lines)) rem;\n  -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n  line-clamp: var(--z-book-card-subtitle-lines);\n  line-height: 1.4rem;\n  word-break: var(--z-book-card-subtitle-word-break);\n}\n\n:host .main-content .card-info .top .ellipsis.authors {\n  height: calc(1.4 * var(--z-book-card-authors-lines)) rem;\n  -webkit-line-clamp: var(--z-book-card-authors-lines);\n  line-clamp: var(--z-book-card-authors-lines);\n  line-height: 1.4rem;\n  word-break: var(--z-book-card-authors-word-break);\n}\n\n:host .main-content .card-info .top .opera-title * {\n  all: unset;\n}\n\n:host .main-content .cta-wrapper {\n  display: flex;\n  justify-content: space-between;\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .top .link-chip-wrapper {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host .main-content .card-info .bottom .ebook {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--space-unit);\n  background-color: var(--color-primary02);\n  border-radius: var(--border-radius);\n  gap: var(--space-unit);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name {\n  display: flex;\n  align-items: center;\n  padding: calc(var(--space-unit) / 2) 0;\n  font-family: var(--font-family-serif);\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name .ebook-logo {\n  width: 1.5rem;\n  height: 1.5rem;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");\n}\n\n:host([variant=\"landscape\"]) {\n  width: 635px;\n  min-height: max(332px, 20.75rem);\n  padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n  min-height: max(332px, 20.75rem);\n  box-sizing: border-box;\n  flex-direction: row;\n  padding: calc(var(--space-unit) * 2);\n  gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover {\n  display: flex;\n  overflow: hidden;\n  width: 221px;\n  height: 300px;\n  margin: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n  min-height: 80px;\n  max-height: 256px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info {\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n  gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n  :host([variant=\"portrait\"]) {\n    width: 100%;\n    max-width: 400px;\n  }\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","button.z-link {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n  display: inline-flex;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  line-height: inherit;\n  text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n  --z-icon-width: 1.125em;\n  --z-icon-height: 1.125em;\n\n  align-items: center;\n  column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n  font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n  text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus,\nbutton.z-link:focus,\na.z-link:active,\nbutton.z-link:active {\n  text-decoration: underline;\n}\n\na.z-link:focus,\nbutton.z-link:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n  box-shadow: none;\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  outline: none;\n  pointer-events: none;\n  text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus,\nbutton.z-link:focus,\na.z-link.z-link-active:focus,\nbutton.z-link.z-link-active:focus,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n  color: var(--color-text-link-default);\n  fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n  color: var(--color-text-link-blue);\n  fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n  color: var(--color-text-link-red);\n  fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n  color: var(--color-text-link-blue-hover);\n  fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n  color: var(--color-text-link-red-hover);\n  fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus,\nbutton.z-link.z-link-blue:focus {\n  color: var(--color-text-link-blue-active);\n  fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus,\nbutton.z-link.z-link-red:focus {\n  color: var(--color-text-link-red-active);\n  fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus,\nbutton.z-link.z-link-inverse:focus {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n  color: var(--color-text-link-blue-visited);\n  fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n  color: var(--color-text-link-red-visited);\n  fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {BookCardVariant, ControlSize} from \"../../../beans\";\n\n/**\n * @slot cta - top right cta (e.g. bookmark icon)\n * @slot ebook - as default, it shows laZ ebook link\n * @slot tags - tags section, default empty\n * @slot data - external link and pill, default empty\n * @slot apps - list of card-related apps, default empty\n * @slot coverOverlay - purple layer on top of book cover\n * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px\n * @cssprop --z-book-card-title-lines - set title avilable lines - default 2\n * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial\n * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1\n * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all\n * @cssprop --z-book-card-authors-lines - set authors available lines - default 1\n * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all\n */\n@Component({\n  tag: \"z-book-card\",\n  styleUrls: [\"styles.css\", \"../../../tokens/typography.css\", \"../../css-components/z-link/styles.css\"],\n  shadow: true,\n})\nexport class ZBookCard {\n  @Element() hostElement: HTMLZBookCardElement;\n\n  /** Card variant: landscape, portrait */\n  @Prop({reflect: true})\n  variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n  /** Cover URL */\n  @Prop()\n  cover: string;\n\n  /** Opera title (card title) */\n  @Prop()\n  operaTitle: string;\n\n  /** [optional] Volume title (card subvolume) */\n  @Prop()\n  volumeTitle?: string;\n\n  /** [optional] Authors */\n  @Prop()\n  authors?: string;\n\n  /** [optional] Main ISBN */\n  @Prop()\n  isbn?: string;\n\n  /** [optional] ISBN label */\n  @Prop()\n  isbnLabel = \"\";\n\n  /** [optional] year */\n  @Prop()\n  year?: string;\n\n  /** [optional] Show link to the ebook resource. Set title and cover as clickable, opening a new tab to the ebook resource */\n  @Prop()\n  ebookUrl?: string;\n\n  /** [optional] Fallback cover URL */\n  @Prop()\n  fallbackCover?: string;\n\n  /** [optional] Set a specific h level as html tag for opera title */\n  @Prop()\n  titleHtmlTag?: string;\n\n  /** click on ebook link */\n  @Event()\n  ebookClick: EventEmitter;\n\n  /** click on cover link */\n  @Event()\n  coverClick: EventEmitter;\n\n  /** click on title link */\n  @Event()\n  titleClick: EventEmitter;\n\n  private emitEbookClick(): void {\n    this.ebookClick.emit();\n  }\n\n  private emitCoverClick(): void {\n    this.coverClick.emit();\n  }\n\n  private emitTitleClick(): void {\n    this.titleClick.emit();\n  }\n\n  private renderCover(): HTMLDivElement {\n    const coverImg: HTMLImageElement = (\n      <img\n        src={this.cover}\n        onError={() => {\n          if (this.fallbackCover) {\n            this.cover = this.fallbackCover;\n          }\n        }}\n        aria-hidden=\"true\"\n      />\n    );\n\n    return (\n      <div class=\"cover\">\n        {this.ebookUrl ? (\n          <a\n            tabIndex={0}\n            class={\"cover-link\"}\n            href={this.ebookUrl}\n            onClick={() => this.emitCoverClick()}\n            target=\"_blank\"\n          >\n            {coverImg}\n          </a>\n        ) : (\n          coverImg\n        )}\n        <slot name=\"coverOverlay\"></slot>\n      </div>\n    );\n  }\n\n  private renderYear(): null | HTMLDivElement {\n    if (!this.year) {\n      return null;\n    }\n\n    return (\n      <div\n        class=\"year ellipsis body-4\"\n        aria-description=\"anno\"\n      >\n        {this.year}\n      </div>\n    );\n  }\n\n  private renderAuthors(): null | HTMLDivElement {\n    if (!this.authors) {\n      return null;\n    }\n\n    return (\n      <div class=\"cta-wrapper\">\n        <div\n          class=\"authors ellipsis body-4\"\n          aria-description=\"autori\"\n        >\n          {this.authors}\n        </div>\n        {this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null}\n      </div>\n    );\n  }\n\n  private renderOperaTitle(): HTMLDivElement {\n    const title = this.titleHtmlTag\n      ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`\n      : this.operaTitle;\n\n    const operaTitle = (\n      <div\n        class=\"opera-title ellipsis body-2-sb\"\n        innerHTML={title}\n      />\n    );\n\n    return (\n      <div class=\"cta-wrapper\">\n        {this.ebookUrl ? (\n          <a\n            class=\"z-link\"\n            href={this.ebookUrl}\n            onClick={() => this.emitTitleClick()}\n            target=\"_blank\"\n          >\n            {operaTitle}\n          </a>\n        ) : (\n          operaTitle\n        )}\n        {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n      </div>\n    );\n  }\n\n  private renderVolumeTitle(): null | HTMLDivElement {\n    if (!this.volumeTitle) {\n      return null;\n    }\n\n    return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n  }\n\n  private renderIsbn(): null | HTMLDivElement {\n    if (!this.isbn) {\n      return null;\n    }\n\n    return (\n      <div\n        class=\"isbn ellipsis body-4-sb\"\n        aria-description={`isbn ${this.isbnLabel}`}\n      >\n        {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n      </div>\n    );\n  }\n\n  private renderEbook(): HTMLDivElement {\n    return (\n      <div class=\"ebook\">\n        <div>\n          <div class=\"app-name\">\n            <img\n              class=\"ebook-logo\"\n              aria-hidden=\"true\"\n            />\n            <div class=\"body-4-sb\">laZ Ebook</div>\n          </div>\n        </div>\n        <z-button\n          size={ControlSize.X_SMALL}\n          href={this.ebookUrl}\n          target=\"_blank\"\n          onClick={() => this.emitEbookClick()}\n          htmlrole=\"link\"\n          aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n        >\n          leggi ebook\n        </z-button>\n      </div>\n    );\n  }\n\n  private renderCtaSlot(): HTMLSlotElement {\n    return <slot name=\"cta\"></slot>;\n  }\n\n  render(): HTMLZBookCardElement {\n    return (\n      <Host>\n        <div class=\"main-content\">\n          {this.renderCover()}\n          <div class=\"card-info\">\n            <div class=\"top\">\n              <div>\n                {this.renderYear()}\n                {this.renderAuthors()}\n                {this.renderOperaTitle()}\n                {this.renderVolumeTitle()}\n                {this.renderIsbn()}\n              </div>\n              <slot name=\"tags\"></slot>\n              <slot name=\"data\"></slot>\n            </div>\n            <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n          </div>\n        </div>\n        <slot name=\"apps\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-book-card.entry.js","mappings":"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","names":["stylesCss","defaultFallbackCover"],"sources":["src/components/book-card/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/tokens/typography.css?tag=z-book-card&encapsulation=shadow","src/components/css-components/z-link/styles.css?tag=z-book-card&encapsulation=shadow","src/components/book-card/z-book-card/index.tsx"],"sourcesContent":[":host {\n  --z-book-card-portrait-cover-height: 378px;\n  --z-book-card-title-lines: 2;\n  --z-book-card-title-word-break: initial;\n  --z-book-card-subtitle-lines: 1;\n  --z-book-card-subtitle-word-break: break-all;\n  --z-book-card-authors-lines: 1;\n  --z-book-card-authors-word-break: break-all;\n\n  display: flex;\n  width: 304px;\n  box-sizing: border-box;\n  flex-direction: column;\n  border: solid var(--border-size-medium) var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n}\n\n:host .main-content {\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: var(--space-unit);\n  gap: var(--space-unit);\n}\n\n:host .main-content .cover {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  height: var(--z-book-card-portrait-cover-height);\n  align-items: flex-end;\n  background: var(--color-white);\n  border-radius: var(--border-radius);\n}\n\n:host .main-content .cover:focus-within {\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host .main-content .cover a {\n  display: inline-flex;\n  outline: none;\n}\n\n:host .main-content .cover img {\n  max-width: 100%;\n  max-height: 100%;\n  outline: none;\n}\n\n::slotted([slot=\"coverOverlay\"]) {\n  position: absolute;\n  bottom: 0;\n  overflow: hidden;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-unit);\n  background-color: var(--avatar-C19);\n  color: var(--color-white);\n}\n\n:host .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n  min-height: 80px;\n  max-height: 336px;\n}\n\n:host .main-content .card-info {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--space-unit) * 2);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"tags\"]) {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-unit);\n}\n\n:host .main-content .card-info .top ::slotted([slot=\"data\"]) {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host .main-content .card-info .top .ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  height: 1.4rem;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  line-height: 1.4rem;\n  text-overflow: ellipsis;\n  word-break: break-all;\n}\n\n:host .main-content .card-info .top .ellipsis.opera-title {\n  height: calc(1.5 * var(--z-book-card-title-lines)) rem;\n  -webkit-line-clamp: var(--z-book-card-title-lines);\n  line-clamp: var(--z-book-card-title-lines);\n  line-height: 1.5rem;\n  word-break: var(--z-book-card-title-word-break);\n}\n\n:host .main-content .card-info .top .ellipsis.volume-title {\n  height: calc(1.4 * var(--z-book-card-subtitle-lines)) rem;\n  -webkit-line-clamp: var(--z-book-card-subtitle-lines);\n  line-clamp: var(--z-book-card-subtitle-lines);\n  line-height: 1.4rem;\n  word-break: var(--z-book-card-subtitle-word-break);\n}\n\n:host .main-content .card-info .top .ellipsis.authors {\n  height: calc(1.4 * var(--z-book-card-authors-lines)) rem;\n  -webkit-line-clamp: var(--z-book-card-authors-lines);\n  line-clamp: var(--z-book-card-authors-lines);\n  line-height: 1.4rem;\n  word-break: var(--z-book-card-authors-word-break);\n}\n\n:host .main-content .card-info .top .opera-title * {\n  all: unset;\n}\n\n:host .main-content .cta-wrapper {\n  display: flex;\n  justify-content: space-between;\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .top .link-chip-wrapper {\n  display: flex;\n  justify-content: space-between;\n}\n\n:host .main-content .card-info .bottom .ebook {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--space-unit);\n  background-color: var(--color-primary02);\n  border-radius: var(--border-radius);\n  gap: var(--space-unit);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name {\n  display: flex;\n  align-items: center;\n  padding: calc(var(--space-unit) / 2) 0;\n  font-family: var(--font-family-serif);\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host .main-content .card-info .bottom .ebook .app-name .ebook-logo {\n  width: 1.5rem;\n  height: 1.5rem;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");\n}\n\n:host([variant=\"landscape\"]) {\n  width: 635px;\n  min-height: max(332px, 20.75rem);\n  padding: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content {\n  min-height: max(332px, 20.75rem);\n  box-sizing: border-box;\n  flex-direction: row;\n  padding: calc(var(--space-unit) * 2);\n  gap: calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .cover {\n  display: flex;\n  overflow: hidden;\n  width: 221px;\n  height: 300px;\n  margin: 0;\n}\n\n:host([variant=\"landscape\"]) .main-content .cover ::slotted([slot=\"coverOverlay\"]) {\n  min-height: 80px;\n  max-height: 256px;\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info {\n  gap: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"landscape\"]) .main-content .card-info .top {\n  gap: calc(var(--space-unit) / 2);\n}\n\n@media (max-width: 767px) {\n  :host([variant=\"portrait\"]) {\n    width: 100%;\n    max-width: 400px;\n  }\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","button.z-link {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n  display: inline-flex;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  line-height: inherit;\n  text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n  --z-icon-width: 1.125em;\n  --z-icon-height: 1.125em;\n\n  align-items: center;\n  column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n  font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n  text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus,\nbutton.z-link:focus,\na.z-link:active,\nbutton.z-link:active {\n  text-decoration: underline;\n}\n\na.z-link:focus,\nbutton.z-link:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n  box-shadow: none;\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  outline: none;\n  pointer-events: none;\n  text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus,\nbutton.z-link:focus,\na.z-link.z-link-active:focus,\nbutton.z-link.z-link-active:focus,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n  color: var(--color-text-link-default);\n  fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n  color: var(--color-text-link-blue);\n  fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n  color: var(--color-text-link-red);\n  fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n  color: var(--color-text-link-blue-hover);\n  fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n  color: var(--color-text-link-red-hover);\n  fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus,\nbutton.z-link.z-link-blue:focus {\n  color: var(--color-text-link-blue-active);\n  fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus,\nbutton.z-link.z-link-red:focus {\n  color: var(--color-text-link-red-active);\n  fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus,\nbutton.z-link.z-link-inverse:focus {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n  color: var(--color-text-link-blue-visited);\n  fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n  color: var(--color-text-link-red-visited);\n  fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport defaultFallbackCover from \"../../../assets/images/png/placeholder-cover.png\";\nimport {BookCardVariant, ControlSize} from \"../../../beans\";\n\n/**\n * @slot cta - top right cta (e.g. bookmark icon)\n * @slot ebook - as default, it shows laZ ebook link\n * @slot tags - tags section, default empty\n * @slot data - external link and pill, default empty\n * @slot apps - list of card-related apps, default empty\n * @slot coverOverlay - purple layer on top of book cover\n * @cssprop --z-book-card-portrait-cover-height - set custom cover height for portrait variant - default 378px\n * @cssprop --z-book-card-title-lines - set title avilable lines - default 2\n * @cssprop --z-book-card-title-word-break - set title word-break rule - default initial\n * @cssprop --z-book-card-subtitle-lines - set subtitle available lines - default 1\n * @cssprop --z-book-card-subtitle-word-break - set subtitle word-break rule - default break-all\n * @cssprop --z-book-card-authors-lines - set authors available lines - default 1\n * @cssprop --z-book-card-authors-word-break - set authors word-break rule - default break-all\n */\n@Component({\n  tag: \"z-book-card\",\n  styleUrls: [\"styles.css\", \"../../../tokens/typography.css\", \"../../css-components/z-link/styles.css\"],\n  shadow: true,\n})\nexport class ZBookCard {\n  @Element() hostElement: HTMLZBookCardElement;\n\n  /** Card variant: landscape, portrait */\n  @Prop({reflect: true})\n  variant: BookCardVariant = BookCardVariant.PORTRAIT;\n\n  /** Cover URL */\n  @Prop()\n  cover: string;\n\n  /** Opera title (card title) */\n  @Prop()\n  operaTitle: string;\n\n  /** [optional] Volume title (card subvolume) */\n  @Prop()\n  volumeTitle?: string;\n\n  /** [optional] Authors */\n  @Prop()\n  authors?: string;\n\n  /** [optional] Main ISBN */\n  @Prop()\n  isbn?: string;\n\n  /** [optional] ISBN label */\n  @Prop()\n  isbnLabel = \"\";\n\n  /** [optional] year */\n  @Prop()\n  year?: string;\n\n  /** [optional] Show link to the ebook resource. Set title and cover as clickable, opening a new tab to the ebook resource */\n  @Prop()\n  ebookUrl?: string;\n\n  /** [optional] Fallback cover URL */\n  @Prop()\n  fallbackCover?: string;\n\n  /** [optional] Set a specific h level as html tag for opera title */\n  @Prop()\n  titleHtmlTag?: string;\n\n  /** click on ebook link */\n  @Event()\n  ebookClick: EventEmitter;\n\n  /** click on cover link */\n  @Event()\n  coverClick: EventEmitter;\n\n  /** click on title link */\n  @Event()\n  titleClick: EventEmitter;\n\n  private emitEbookClick(): void {\n    this.ebookClick.emit();\n  }\n\n  private emitCoverClick(): void {\n    this.coverClick.emit();\n  }\n\n  private emitTitleClick(): void {\n    this.titleClick.emit();\n  }\n\n  private renderCover(): HTMLDivElement {\n    const coverImg: HTMLImageElement = (\n      <img\n        src={this.cover}\n        onError={() => {\n          if (this.fallbackCover) {\n            this.cover = this.fallbackCover;\n          } else {\n            this.cover = defaultFallbackCover;\n          }\n        }}\n        aria-hidden=\"true\"\n      />\n    );\n\n    return (\n      <div class=\"cover\">\n        {this.ebookUrl ? (\n          <a\n            tabIndex={0}\n            class={\"cover-link\"}\n            href={this.ebookUrl}\n            onClick={() => this.emitCoverClick()}\n            target=\"_blank\"\n          >\n            {coverImg}\n          </a>\n        ) : (\n          coverImg\n        )}\n        <slot name=\"coverOverlay\"></slot>\n      </div>\n    );\n  }\n\n  private renderYear(): null | HTMLDivElement {\n    if (!this.year) {\n      return null;\n    }\n\n    return (\n      <div\n        class=\"year ellipsis body-4\"\n        aria-description=\"anno\"\n      >\n        {this.year}\n      </div>\n    );\n  }\n\n  private renderAuthors(): null | HTMLDivElement {\n    if (!this.authors) {\n      return null;\n    }\n\n    return (\n      <div class=\"cta-wrapper\">\n        <div\n          class=\"authors ellipsis body-4\"\n          aria-description=\"autori\"\n        >\n          {this.authors}\n        </div>\n        {this.variant === BookCardVariant.LANDSCAPE ? this.renderCtaSlot() : null}\n      </div>\n    );\n  }\n\n  private renderOperaTitle(): HTMLDivElement {\n    const title = this.titleHtmlTag\n      ? `<${this.titleHtmlTag}>${this.operaTitle}</${this.titleHtmlTag}>`\n      : this.operaTitle;\n\n    const operaTitle = (\n      <div\n        class=\"opera-title ellipsis body-2-sb\"\n        innerHTML={title}\n      />\n    );\n\n    return (\n      <div class=\"cta-wrapper\">\n        {this.ebookUrl ? (\n          <a\n            class=\"z-link\"\n            href={this.ebookUrl}\n            onClick={() => this.emitTitleClick()}\n            target=\"_blank\"\n          >\n            {operaTitle}\n          </a>\n        ) : (\n          operaTitle\n        )}\n        {this.variant === BookCardVariant.PORTRAIT ? this.renderCtaSlot() : null}\n      </div>\n    );\n  }\n\n  private renderVolumeTitle(): null | HTMLDivElement {\n    if (!this.volumeTitle) {\n      return null;\n    }\n\n    return <div class=\"volume-title ellipsis body-4\">{this.volumeTitle}</div>;\n  }\n\n  private renderIsbn(): null | HTMLDivElement {\n    if (!this.isbn) {\n      return null;\n    }\n\n    return (\n      <div\n        class=\"isbn ellipsis body-4-sb\"\n        aria-description={`isbn ${this.isbnLabel}`}\n      >\n        {this.isbn} {this.isbnLabel ? <span class=\"body-4\">{this.isbnLabel}</span> : null}\n      </div>\n    );\n  }\n\n  private renderEbook(): HTMLDivElement {\n    return (\n      <div class=\"ebook\">\n        <div>\n          <div class=\"app-name\">\n            <img\n              class=\"ebook-logo\"\n              aria-hidden=\"true\"\n            />\n            <div class=\"body-4-sb\">laZ Ebook</div>\n          </div>\n        </div>\n        <z-button\n          size={ControlSize.X_SMALL}\n          href={this.ebookUrl}\n          target=\"_blank\"\n          onClick={() => this.emitEbookClick()}\n          htmlrole=\"link\"\n          aria-description={`leggi l'ebook ${this.operaTitle} su laZ Ebook`}\n        >\n          leggi ebook\n        </z-button>\n      </div>\n    );\n  }\n\n  private renderCtaSlot(): HTMLSlotElement {\n    return <slot name=\"cta\"></slot>;\n  }\n\n  render(): HTMLZBookCardElement {\n    return (\n      <Host>\n        <div class=\"main-content\">\n          {this.renderCover()}\n          <div class=\"card-info\">\n            <div class=\"top\">\n              <div>\n                {this.renderYear()}\n                {this.renderAuthors()}\n                {this.renderOperaTitle()}\n                {this.renderVolumeTitle()}\n                {this.renderIsbn()}\n              </div>\n              <slot name=\"tags\"></slot>\n              <slot name=\"data\"></slot>\n            </div>\n            <slot name=\"ebook\">{!!this.ebookUrl && <div class=\"bottom\">{this.renderEbook()}</div>}</slot>\n          </div>\n        </div>\n        <slot name=\"apps\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
 import { C as CardVariant } from './index-2a6324f8.js';
 
-const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot=\"text\"]){margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot=\"action\"]:focus){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant=\"text\"]) [slot=\"text\"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
+const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]){width:100%;-webkit-line-clamp:1;line-clamp:1;text-transform:uppercase}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25)}::slotted([slot=\"title\"]){margin:0;font-size:var(--font-size-3);font-weight:var(--font-sb);-webkit-line-clamp:2;line-clamp:2;text-decoration:none}::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none}::slotted([slot=\"text\"]){width:100%;margin:0;-webkit-line-clamp:3;line-clamp:3}.actions{display:flex;align-items:center;margin-top:auto}::slotted([slot=\"action\"]){position:relative;z-index:2}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}::slotted([slot=\"action\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([variant=\"text\"]) [slot=\"text\"]::before{border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
 const ZCardStyle0 = stylesCss;
 
 const ZCard = class {

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

@@ -1 +1 @@
-{"file":"z-card.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,2vIAA2vI,CAAC;AAC9wI,oBAAe,SAAS;;MCsBX,KAAK;;;;;0BAeH,KAAK;yBAIN,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KACzE;;;;;IAMO,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;KACH;;;;IAKO,aAAa;QACnB,QACE,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,EACN;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE;YACrC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;SAC5C;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,aAAa,IAAI;gBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD,EACL,IAAI,CAAC,aAAa,EAAE,CAChB,EACP;SACH;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;KACnD;;;;;;;","names":[],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":["/* The width of the card must be set by its container,\nrespecting the grid indications of the design. */\n\n:host {\n  /* Override this var to change the cover's aspect ratio */\n  --aspect-ratio: 1.62;\n  --z-card--border-color: var(--gray200);\n  --z-card--color-cover-background: var(--color-surface01);\n  --z-card--text-background: var(--color-surface01);\n  --z-card--text-border-radius: none;\n  --z-card--text-border: none;\n  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n  position: relative;\n  width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n  padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.cover-container > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 11);\n  --z-icon-height: var(--z-icon-width);\n\n  position: absolute;\n  top: calc(50% - calc(var(--z-icon-height) / 2));\n  left: calc(50% - calc(var(--z-icon-width) / 2));\n  fill: var(--color-primary01);\n}\n\n.color-cover {\n  background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n  display: -webkit-inline-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n  margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: \"\";\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n  margin: 0 0 calc(var(--space-unit) * 0.25);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"title\"]) {\n  margin: 0;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n  margin: 0;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n}\n\n.actions {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n:host([variant=\"text\"]) {\n  border: var(--z-card--text-border);\n  background-color: var(--z-card--text-background);\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n  height: 100%;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n  padding: var(--z-card--text-padding);\n}\n\n:host([variant=\"border\"]) .actions,\n:host([variant=\"shadow\"]) .actions {\n  margin-top: auto;\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n  border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n  background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n  border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n  box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n  box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /** Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc. */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContent()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContent()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"],"version":3}
+{"file":"z-card.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,uvIAAuvI,CAAC;AAC1wI,oBAAe,SAAS;;MCwBX,KAAK;;;;;0BAeH,KAAK;yBAON,KAAK;;;IAOjB,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KACzE;;;;;IAMO,oBAAoB;QAC1B,OAAO;YACL,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF;YACN,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;SACP,CAAC;KACH;;;;IAKO,aAAa;QACnB,QACE,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,UAAU,GAAQ,EAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,EACN;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,IAAI,EAAE;YACrC,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,aAAa,EAAE,CAAQ,CAAC;SAC5C;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;YAC9D,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,aAAa,IAAI;gBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,SAAS,GAAW;aAClG,EACA,CAAC,IAAI,CAAC,aAAa,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO,CACnD,EACL,IAAI,CAAC,aAAa,EAAE,CAChB,EACP;SACH;QAED,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;KACnD;;;;;;;","names":[],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":[":host {\n  --aspect-ratio: 1.62;\n  --z-card--border-color: var(--gray200);\n  --z-card--color-cover-background: var(--color-surface01);\n  --z-card--text-background: var(--color-surface01);\n  --z-card--text-border-radius: none;\n  --z-card--text-border: none;\n  --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n  position: relative;\n  width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n  padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.cover-container > z-icon {\n  --z-icon-width: calc(var(--space-unit) * 11);\n  --z-icon-height: var(--z-icon-width);\n\n  position: absolute;\n  top: calc(50% - calc(var(--z-icon-height) / 2));\n  left: calc(50% - calc(var(--z-icon-width) / 2));\n  fill: var(--color-primary01);\n}\n\n.color-cover {\n  background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n  margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: \"\";\n}\n\n::slotted([slot=\"metadata\"]) {\n  width: 100%;\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  text-transform: uppercase;\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n  margin: 0 0 calc(var(--space-unit) * 0.25);\n}\n\n::slotted([slot=\"title\"]) {\n  margin: 0;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  text-decoration: none;\n}\n\n::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n::slotted([slot=\"text\"]) {\n  width: 100%;\n  margin: 0;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n}\n\n.actions {\n  display: flex;\n  align-items: center;\n  margin-top: auto;\n}\n\n::slotted([slot=\"action\"]) {\n  position: relative;\n  z-index: 2;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"action\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"text\"]) {\n  border: var(--z-card--text-border);\n  background-color: var(--z-card--text-background);\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([variant=\"text\"]) [slot=\"text\"]::before {\n  border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n  height: 100%;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n  padding: var(--z-card--text-padding);\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n  border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n  background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n  border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n  box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n  box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: flex-end;\n  padding: var(--space-unit);\n  background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * The width of the card must be set by its container, following the grid indications of the design.\n *\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.\n * @slot text\n * @slot action - Interactive elements to place at the bottom of the card. To put non-interactive elements here when using an `<a>` tag in the `title` slot, and use this as a sort of \"footer\", set `z-index: 0` on each of those elements.\n */\n@Component({\n  tag: \"z-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCard {\n  /**\n   * Card variant.\n   * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n   * Leave it undefined for the default card.\n   */\n  @Prop({reflect: true})\n  variant: CardVariant;\n\n  /** Name of the icon to place over the image cover */\n  @Prop()\n  coverIcon: string;\n\n  /** Enable shadow. Default: false. */\n  @Prop({reflect: true})\n  showShadow = false;\n\n  /**\n   * Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\n   * Always set this to `true` when putting an `<a>` tag in the `title` slot.\n   */\n  @Prop({reflect: true})\n  clickable = false;\n\n  @Element() host: HTMLZCardElement;\n\n  @State()\n  hasCoverImage: boolean;\n\n  componentWillLoad(): void {\n    this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n  }\n\n  /**\n   * Template for a card without image cover.\n   * A colored background replaces the image and some data is moved over it.\n   */\n  private renderColorCoverCard(): HTMLDivElement[] {\n    return [\n      <div class=\"cover-container\">\n        <div class=\"color-cover\">\n          <div class=\"cover-content\">\n            <slot name=\"metadata\"></slot>\n            <slot name=\"title\"></slot>\n          </div>\n        </div>\n      </div>,\n      <div class=\"content\">\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>,\n    ];\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content\">\n        <slot name=\"metadata\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"text\"></slot>\n        <div class=\"actions\">\n          <slot name=\"action\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZCardElement {\n    if (this.variant === CardVariant.TEXT) {\n      return <Host>{this.renderContent()}</Host>;\n    }\n\n    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n      return (\n        <Host>\n          <div class=\"cover-container\">\n            {this.hasCoverImage && [\n              <slot name=\"cover\"></slot>,\n              this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n            ]}\n            {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n          </div>\n          {this.renderContent()}\n        </Host>\n      );\n    }\n\n    return <Host>{this.renderColorCoverCard()}</Host>;\n  }\n}\n"],"version":3}

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

@@ -1,9 +1,10 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { i as img } from './placeholder-cover-9346be8f.js';
 
 const stylesCss$1 = ":host{display:flex;overflow:hidden;min-width:0;height:calc(174px - var(--space-unit) * 2);max-height:calc(174px - var(--space-unit) * 2);padding:var(--space-unit);border:var(--border-size-medium) solid var(--color-surface02);border-radius:var(--border-size-large);cursor:pointer;font-family:var(--font-family-sans)}:host(:focus:focus-visible){z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}:host(.info-card:focus:focus-visible){z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.info-container{display:flex;overflow:hidden;min-width:0;flex:1;flex-direction:column;padding-left:calc(var(--space-unit) * 2)}.authors-label{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);text-overflow:ellipsis;white-space:nowrap}.card-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:2;line-clamp:2;line-height:1.5;word-break:break-word}.card-subtitle{overflow:hidden;color:var(--color-default-text);text-overflow:ellipsis;white-space:nowrap}.card-subtitle.info-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.2;white-space:normal;word-break:break-word}.tags-container{display:flex;max-width:100%;flex-wrap:wrap;margin-top:calc(var(--space-unit) * 2);gap:var(--space-unit)}.volumes-label{display:flex;height:auto;flex-direction:column;margin-top:auto;color:var(--color-default-text);font-size:var(--font-size-1)}:host(.info-card){display:flex;height:calc(76px - var(--space-unit) * 2);max-height:calc(76px - var(--space-unit) * 2)}.info-icon-column{display:flex;width:50px;height:100%;align-items:center;justify-content:center}.info-icon-container{display:flex;width:34px;height:34px;align-items:center;justify-content:center;margin-bottom:calc(var(--space-unit) * 3);background-color:var(--gray50);border-radius:var(--border-size-large)}.card-title.info-title{display:-webkit-box;overflow:hidden;min-width:0;max-width:100%;max-height:2.4em;margin-top:0;margin-bottom:4px;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:1;line-clamp:1;line-height:1.2;word-break:break-word}.info-icon{width:18px;height:18px;color:var(--color-default-text)}@media (max-width: 768px){.card-title{display:block;overflow:hidden;line-height:normal;text-overflow:ellipsis;white-space:nowrap}}";
 const ZResultCardStyle0 = stylesCss$1;
 
-const stylesCss = ".z-cover-container{position:relative;display:flex;width:119px;height:158px;align-items:center;justify-items:center}.z-cover-stack{width:100%;height:100%}.z-cover-shadow,.z-cover-img{width:117px;min-width:117px;max-width:117px;height:156px;min-height:156px;max-height:156px}.z-cover-container.has-multiple .z-cover-shadow,.z-cover-container.has-multiple .z-cover-img{width:105px;min-width:105px;max-width:105px;height:140px;min-height:140px;max-height:140px}.z-cover-shadow{position:absolute;z-index:1;background-color:var(--color-white)}.z-shadow-1{z-index:1;top:var(--space-unit);right:6px;border:var(--border-size-small) solid black}.z-shadow-2{z-index:0;top:calc(var(--space-unit) * 2);right:12px;border:var(--border-size-small) solid black}.z-cover-img{position:absolute;z-index:2;top:0;right:0;border:var(--border-size-small) solid black;object-fit:cover;object-position:left}.z-cover-container.has-multiple .z-cover-img{left:12px}";
+const stylesCss = ".z-cover-container{position:relative;display:flex;width:119px;height:158px;align-items:center;justify-items:center}.z-cover-stack{width:100%;height:100%}.z-cover-shadow,.z-cover-img{width:117px;min-width:117px;max-width:117px;height:156px;min-height:156px;max-height:156px}.z-cover-container.has-multiple .z-cover-shadow,.z-cover-container.has-multiple .z-cover-img{width:105px;min-width:105px;max-width:105px;height:140px;min-height:140px;max-height:140px}.z-cover-shadow{position:absolute;z-index:1;background-color:var(--color-white)}.z-shadow-1{z-index:0;top:var(--space-unit);right:6px;border:var(--border-size-small) solid black}.z-shadow-2{z-index:0;top:calc(var(--space-unit) * 2);right:12px;border:var(--border-size-small) solid black}.z-cover-img{position:absolute;z-index:0;top:0;right:0;border:var(--border-size-small) solid black;object-fit:cover;object-position:left}.z-cover-container.has-multiple .z-cover-img{left:12px}";
 const ZResultCardStyle1 = stylesCss;
 
 const ZResultCard = class {
@@ -15,7 +16,14 @@ const ZResultCard = class {
             this.setTooltipTitle(this.subtitleRef);
         };
         this.renderOperaCard = () => {
-            return (h(Host, { tabIndex: 0 }, h("div", { class: `z-cover-container ${this.hasMultipleCovers ? "has-multiple" : ""}` }, h("div", { class: "z-cover-stack" }, this.hasMultipleCovers && (h("div", null, h("div", { class: "z-cover-shadow z-shadow-2" }), h("div", { class: "z-cover-shadow z-shadow-1" }))), h("img", { src: this.cover, alt: "Book Cover", class: "z-cover-img" }))), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), h("span", { class: "card-title", ref: (el) => (this.titleRef = el) }, this.cardTitle), h("span", { class: "card-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
+            return (h(Host, { tabIndex: 0 }, h("div", { class: `z-cover-container ${this.hasMultipleCovers ? "has-multiple" : ""}` }, h("div", { class: "z-cover-stack" }, this.hasMultipleCovers && (h("div", null, h("div", { class: "z-cover-shadow z-shadow-2" }), h("div", { class: "z-cover-shadow z-shadow-1" }))), h("img", { src: this.cover, alt: "Book Cover", class: "z-cover-img", onError: () => {
+                    if (this.fallbackCover) {
+                        this.cover = this.fallbackCover;
+                    }
+                    else {
+                        this.cover = img;
+                    }
+                } }))), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), h("span", { class: "card-title", ref: (el) => (this.titleRef = el) }, this.cardTitle), h("span", { class: "card-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
         };
         this.renderInfoCard = () => {
             return (h(Host, { tabIndex: 0, class: "info-card" }, h("div", { class: "info-icon-column" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link", width: 18, height: 18 }))), h("div", { class: "info-container" }, h("span", { class: "card-title info-title", ref: (el) => (this.titleRef = el) }, this.cardTitle), h("span", { class: "card-subtitle info-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle))));
@@ -24,6 +32,7 @@ const ZResultCard = class {
         this.cardSubtitle = undefined;
         this.authors = undefined;
         this.cover = undefined;
+        this.fallbackCover = undefined;
         this.hasMultipleCovers = false;
         this.isInfoCard = false;
     }

package/dist/esm/z-result-card.entry.js.map

@@ -1 +1 @@
-{"file":"z-result-card.entry.js","mappings":"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","names":["stylesCss"],"sources":["src/components/result-card/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/css-components/z-cover/styles.css?tag=z-result-card&encapsulation=shadow","src/components/result-card/z-result-card/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  height: calc(174px - var(--space-unit) * 2);\n  max-height: calc(174px - var(--space-unit) * 2);\n  padding: var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-surface02);\n  border-radius: var(--border-size-large);\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n}\n\n:host(:focus:focus-visible) {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(.info-card:focus:focus-visible) {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.info-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  padding-left: calc(var(--space-unit) * 2);\n}\n\n.authors-label {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.card-subtitle {\n  overflow: hidden;\n  color: var(--color-default-text);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-subtitle.info-subtitle {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.2;\n  white-space: normal;\n  word-break: break-word;\n}\n\n.tags-container {\n  display: flex;\n  max-width: 100%;\n  flex-wrap: wrap;\n  margin-top: calc(var(--space-unit) * 2);\n  gap: var(--space-unit);\n}\n\n.volumes-label {\n  display: flex;\n  height: auto;\n  flex-direction: column;\n  margin-top: auto;\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n}\n\n:host(.info-card) {\n  display: flex;\n  height: calc(76px - var(--space-unit) * 2);\n  max-height: calc(76px - var(--space-unit) * 2);\n}\n\n.info-icon-column {\n  display: flex;\n  width: 50px;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n\n.info-icon-container {\n  display: flex;\n  width: 34px;\n  height: 34px;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: calc(var(--space-unit) * 3);\n  background-color: var(--gray50);\n  border-radius: var(--border-size-large);\n}\n\n.card-title.info-title {\n  display: -webkit-box;\n  overflow: hidden;\n  min-width: 0;\n  max-width: 100%;\n  max-height: 2.4em;\n  margin-top: 0;\n  margin-bottom: 4px;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  line-height: 1.2;\n  word-break: break-word;\n}\n\n.info-icon {\n  width: 18px;\n  height: 18px;\n  color: var(--color-default-text);\n}\n\n@media (max-width: 768px) {\n  .card-title {\n    display: block;\n    overflow: hidden;\n    line-height: normal;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n",".z-cover-container {\n  position: relative;\n  display: flex;\n  width: 119px;\n  height: 158px;\n  align-items: center;\n  justify-items: center;\n}\n\n.z-cover-stack {\n  width: 100%;\n  height: 100%;\n}\n\n/* Base sizes for single cover */\n.z-cover-shadow,\n.z-cover-img {\n  width: 117px;\n  min-width: 117px;\n  max-width: 117px;\n  height: 156px;\n  min-height: 156px;\n  max-height: 156px;\n}\n\n/* Scaled sizes for multiple covers */\n.z-cover-container.has-multiple .z-cover-shadow,\n.z-cover-container.has-multiple .z-cover-img {\n  width: 105px;\n  min-width: 105px;\n  max-width: 105px;\n  height: 140px;\n  min-height: 140px;\n  max-height: 140px;\n}\n\n.z-cover-shadow {\n  position: absolute;\n  z-index: 1;\n  background-color: var(--color-white);\n}\n\n.z-shadow-1 {\n  z-index: 1;\n  top: var(--space-unit);\n  right: 6px;\n  border: var(--border-size-small) solid black;\n}\n\n.z-shadow-2 {\n  z-index: 0;\n  top: calc(var(--space-unit) * 2);\n  right: 12px;\n  border: var(--border-size-small) solid black;\n}\n\n.z-cover-img {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  right: 0;\n  border: var(--border-size-small) solid black;\n  object-fit: cover;\n  object-position: left;\n}\n\n.z-cover-container.has-multiple .z-cover-img {\n  left: 12px;\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-cover/styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /**\n   * The title of the card.\n   */\n  @Prop()\n  cardTitle: string;\n\n  /**\n   * The subtitle of the card.\n   */\n  @Prop()\n  cardSubtitle: string;\n\n  /**\n   * The authors of the opera.\n   */\n  @Prop()\n  authors?: string;\n\n  /**\n   * The URL of the cover image.\n   * This is used to display the cover image of the opera.\n   */\n  @Prop()\n  cover?: string;\n\n  /**\n   * Indicates whether the card has multiple covers.\n   * This is used to apply specific styles when there are multiple covers.\n   */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /**\n   * Indicates whether the card is an info page.\n   * This can be used to apply specific styles or behaviors for info pages.\n   */\n  @Prop()\n  isInfoCard = false;\n\n  private authorsRef: HTMLElement;\n\n  private titleRef: HTMLElement;\n\n  private subtitleRef: HTMLElement;\n\n  private setTooltipTitle(el: HTMLElement): void {\n    if (!el) {\n      return;\n    }\n\n    // Check if element uses line-clamp\n    const style = window.getComputedStyle(el);\n    const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n    let isTruncated;\n    if (hasLineClamp) {\n      // For elements with line-clamp, check if content height exceeds line-clamp height\n      const lineHeight = parseInt(style.lineHeight);\n      const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n      const maxHeight = lineHeight * maxLines;\n\n      isTruncated = el.scrollHeight > maxHeight;\n    } else {\n      // Original check for elements without line-clamp\n      isTruncated = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n    }\n\n    if (isTruncated) {\n      el.setAttribute(\"title\", el.textContent.trim());\n    } else {\n      el.removeAttribute(\"title\");\n    }\n  }\n\n  componentDidRender(): void {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  }\n\n  private resizeHandler = (): void => {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  };\n\n  componentDidLoad(): void {\n    window.addEventListener(\"resize\", this.resizeHandler);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"resize\", this.resizeHandler);\n  }\n\n  private renderOperaCard = (): HTMLZResultCardElement => {\n    return (\n      <Host tabIndex={0}>\n        <div class={`z-cover-container ${this.hasMultipleCovers ? \"has-multiple\" : \"\"}`}>\n          <div class=\"z-cover-stack\">\n            {this.hasMultipleCovers && (\n              <div>\n                <div class=\"z-cover-shadow z-shadow-2\" />\n                <div class=\"z-cover-shadow z-shadow-1\" />\n              </div>\n            )}\n            <img\n              src={this.cover}\n              alt=\"Book Cover\"\n              class=\"z-cover-img\"\n            />\n          </div>\n        </div>\n        <div class=\"info-container\">\n          {this.authors && (\n            <span\n              class=\"authors-label\"\n              ref={(el) => (this.authorsRef = el as HTMLElement)}\n            >\n              {this.authors}\n            </span>\n          )}\n          <span\n            class=\"card-title\"\n            ref={(el) => (this.titleRef = el as HTMLElement)}\n          >\n            {this.cardTitle}\n          </span>\n          <span\n            class=\"card-subtitle\"\n            ref={(el) => (this.subtitleRef = el as HTMLElement)}\n          >\n            {this.cardSubtitle}\n          </span>\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <div class=\"volumes-label\">\n            <slot name=\"volumes\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  };\n\n  private renderInfoCard = (): HTMLZResultCardElement => {\n    return (\n      <Host\n        tabIndex={0}\n        class=\"info-card\"\n      >\n        <div class=\"info-icon-column\">\n          <div class=\"info-icon-container\">\n            <z-icon\n              class=\"info-icon\"\n              name=\"link\"\n              width={18}\n              height={18}\n            />\n          </div>\n        </div>\n        <div class=\"info-container\">\n          <span\n            class=\"card-title info-title\"\n            ref={(el) => (this.titleRef = el as HTMLElement)}\n          >\n            {this.cardTitle}\n          </span>\n          <span\n            class=\"card-subtitle info-subtitle\"\n            ref={(el) => (this.subtitleRef = el as HTMLElement)}\n          >\n            {this.cardSubtitle}\n          </span>\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n  }\n}\n"],"version":3}
+{"file":"z-result-card.entry.js","mappings":";;;AAAA,MAAMA,WAAS,GAAG,25EAA25E,CAAC;AAC96E,0BAAeA,WAAS;;ACDxB,MAAM,SAAS,GAAG,06BAA06B,CAAC;AAC77B,0BAAe,SAAS;;MCOX,WAAW;;;QAuFd,kBAAa,GAAG;YACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACtC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACxC,CAAC;QAUM,oBAAe,GAAG;YACxB,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,IACf,WAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,iBAAiB,GAAG,cAAc,GAAG,EAAE,EAAE,IAC7E,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,iBAAiB,KACrB,eACE,WAAK,KAAK,EAAC,2BAA2B,GAAG,EACzC,WAAK,KAAK,EAAC,2BAA2B,GAAG,CACrC,CACP,EACD,WACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,GAAG,EAAC,YAAY,EAChB,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE;oBACP,IAAI,IAAI,CAAC,aAAa,EAAE;wBACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;qBACjC;yBAAM;wBACL,IAAI,CAAC,KAAK,GAAGC,GAAoB,CAAC;qBACnC;iBACF,GACD,CACE,CACF,EACN,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,OAAO,KACX,YACE,KAAK,EAAC,eAAe,EACrB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAEjD,IAAI,CAAC,OAAO,CACR,CACR,EACD,YACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,IAE/C,IAAI,CAAC,SAAS,CACV,EACP,YACE,KAAK,EAAC,eAAe,EACrB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,IAElD,IAAI,CAAC,YAAY,CACb,EACP,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,EACP;SACH,CAAC;QAEM,mBAAc,GAAG;YACvB,QACE,EAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,WAAW,IAEjB,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WAAK,KAAK,EAAC,qBAAqB,IAC9B,cACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACE,CACF,EACN,WAAK,KAAK,EAAC,gBAAgB,IACzB,YACE,KAAK,EAAC,uBAAuB,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,IAE/C,IAAI,CAAC,SAAS,CACV,EACP,YACE,KAAK,EAAC,6BAA6B,EACnC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,IAElD,IAAI,CAAC,YAAY,CACb,CACH,CACD,EACP;SACH,CAAC;;;;;;iCAzJkB,KAAK;0BAOZ,KAAK;;IAQV,eAAe,CAAC,EAAe;QACrC,IAAI,CAAC,EAAE,EAAE;YACP,OAAO;SACR;;QAGD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;QAC1C,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,KAAK,MAAM,CAAC;QAE7E,IAAI,WAAW,CAAC;QAChB,IAAI,YAAY,EAAE;;YAEhB,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAC9C,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACxE,MAAM,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;YAExC,WAAW,GAAG,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC;SAC3C;aAAM;;YAEL,WAAW,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;SACpF;QAED,IAAI,WAAW,EAAE;YACf,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;SACjD;aAAM;YACL,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC7B;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACxC;IAQD,gBAAgB;QACd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACvD;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1D;IA6FD,MAAM;QACJ,OAAO,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;KACzE;;;;;;;","names":["stylesCss","defaultFallbackCover"],"sources":["src/components/result-card/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/css-components/z-cover/styles.css?tag=z-result-card&encapsulation=shadow","src/components/result-card/z-result-card/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  height: calc(174px - var(--space-unit) * 2);\n  max-height: calc(174px - var(--space-unit) * 2);\n  padding: var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-surface02);\n  border-radius: var(--border-size-large);\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n}\n\n:host(:focus:focus-visible) {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(.info-card:focus:focus-visible) {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.info-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  padding-left: calc(var(--space-unit) * 2);\n}\n\n.authors-label {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.card-subtitle {\n  overflow: hidden;\n  color: var(--color-default-text);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-subtitle.info-subtitle {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.2;\n  white-space: normal;\n  word-break: break-word;\n}\n\n.tags-container {\n  display: flex;\n  max-width: 100%;\n  flex-wrap: wrap;\n  margin-top: calc(var(--space-unit) * 2);\n  gap: var(--space-unit);\n}\n\n.volumes-label {\n  display: flex;\n  height: auto;\n  flex-direction: column;\n  margin-top: auto;\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n}\n\n:host(.info-card) {\n  display: flex;\n  height: calc(76px - var(--space-unit) * 2);\n  max-height: calc(76px - var(--space-unit) * 2);\n}\n\n.info-icon-column {\n  display: flex;\n  width: 50px;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n\n.info-icon-container {\n  display: flex;\n  width: 34px;\n  height: 34px;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: calc(var(--space-unit) * 3);\n  background-color: var(--gray50);\n  border-radius: var(--border-size-large);\n}\n\n.card-title.info-title {\n  display: -webkit-box;\n  overflow: hidden;\n  min-width: 0;\n  max-width: 100%;\n  max-height: 2.4em;\n  margin-top: 0;\n  margin-bottom: 4px;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  line-height: 1.2;\n  word-break: break-word;\n}\n\n.info-icon {\n  width: 18px;\n  height: 18px;\n  color: var(--color-default-text);\n}\n\n@media (max-width: 768px) {\n  .card-title {\n    display: block;\n    overflow: hidden;\n    line-height: normal;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n",".z-cover-container {\n  position: relative;\n  display: flex;\n  width: 119px;\n  height: 158px;\n  align-items: center;\n  justify-items: center;\n}\n\n.z-cover-stack {\n  width: 100%;\n  height: 100%;\n}\n\n/* Base sizes for single cover */\n.z-cover-shadow,\n.z-cover-img {\n  width: 117px;\n  min-width: 117px;\n  max-width: 117px;\n  height: 156px;\n  min-height: 156px;\n  max-height: 156px;\n}\n\n/* Scaled sizes for multiple covers */\n.z-cover-container.has-multiple .z-cover-shadow,\n.z-cover-container.has-multiple .z-cover-img {\n  width: 105px;\n  min-width: 105px;\n  max-width: 105px;\n  height: 140px;\n  min-height: 140px;\n  max-height: 140px;\n}\n\n.z-cover-shadow {\n  position: absolute;\n  z-index: 1;\n  background-color: var(--color-white);\n}\n\n.z-shadow-1 {\n  z-index: 0;\n  top: var(--space-unit);\n  right: 6px;\n  border: var(--border-size-small) solid black;\n}\n\n.z-shadow-2 {\n  z-index: 0;\n  top: calc(var(--space-unit) * 2);\n  right: 12px;\n  border: var(--border-size-small) solid black;\n}\n\n.z-cover-img {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  right: 0;\n  border: var(--border-size-small) solid black;\n  object-fit: cover;\n  object-position: left;\n}\n\n.z-cover-container.has-multiple .z-cover-img {\n  left: 12px;\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport defaultFallbackCover from \"../../../assets/images/png/placeholder-cover.png\";\n\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-cover/styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /**\n   * The title of the card.\n   */\n  @Prop()\n  cardTitle: string;\n\n  /**\n   * The subtitle of the card.\n   */\n  @Prop()\n  cardSubtitle: string;\n\n  /**\n   * The authors of the opera.\n   */\n  @Prop()\n  authors?: string;\n\n  /**\n   * The URL of the cover image.\n   * This is used to display the cover image of the opera.\n   */\n  @Prop()\n  cover?: string;\n\n  /** [optional] Fallback cover URL */\n  @Prop()\n  fallbackCover?: string;\n\n  /**\n   * Indicates whether the card has multiple covers.\n   * This is used to apply specific styles when there are multiple covers.\n   */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /**\n   * Indicates whether the card is an info page.\n   * This can be used to apply specific styles or behaviors for info pages.\n   */\n  @Prop()\n  isInfoCard = false;\n\n  private authorsRef: HTMLElement;\n\n  private titleRef: HTMLElement;\n\n  private subtitleRef: HTMLElement;\n\n  private setTooltipTitle(el: HTMLElement): void {\n    if (!el) {\n      return;\n    }\n\n    // Check if element uses line-clamp\n    const style = window.getComputedStyle(el);\n    const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n    let isTruncated;\n    if (hasLineClamp) {\n      // For elements with line-clamp, check if content height exceeds line-clamp height\n      const lineHeight = parseInt(style.lineHeight);\n      const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n      const maxHeight = lineHeight * maxLines;\n\n      isTruncated = el.scrollHeight > maxHeight;\n    } else {\n      // Original check for elements without line-clamp\n      isTruncated = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n    }\n\n    if (isTruncated) {\n      el.setAttribute(\"title\", el.textContent.trim());\n    } else {\n      el.removeAttribute(\"title\");\n    }\n  }\n\n  componentDidRender(): void {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  }\n\n  private resizeHandler = (): void => {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  };\n\n  componentDidLoad(): void {\n    window.addEventListener(\"resize\", this.resizeHandler);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"resize\", this.resizeHandler);\n  }\n\n  private renderOperaCard = (): HTMLZResultCardElement => {\n    return (\n      <Host tabIndex={0}>\n        <div class={`z-cover-container ${this.hasMultipleCovers ? \"has-multiple\" : \"\"}`}>\n          <div class=\"z-cover-stack\">\n            {this.hasMultipleCovers && (\n              <div>\n                <div class=\"z-cover-shadow z-shadow-2\" />\n                <div class=\"z-cover-shadow z-shadow-1\" />\n              </div>\n            )}\n            <img\n              src={this.cover}\n              alt=\"Book Cover\"\n              class=\"z-cover-img\"\n              onError={() => {\n                if (this.fallbackCover) {\n                  this.cover = this.fallbackCover;\n                } else {\n                  this.cover = defaultFallbackCover;\n                }\n              }}\n            />\n          </div>\n        </div>\n        <div class=\"info-container\">\n          {this.authors && (\n            <span\n              class=\"authors-label\"\n              ref={(el) => (this.authorsRef = el as HTMLElement)}\n            >\n              {this.authors}\n            </span>\n          )}\n          <span\n            class=\"card-title\"\n            ref={(el) => (this.titleRef = el as HTMLElement)}\n          >\n            {this.cardTitle}\n          </span>\n          <span\n            class=\"card-subtitle\"\n            ref={(el) => (this.subtitleRef = el as HTMLElement)}\n          >\n            {this.cardSubtitle}\n          </span>\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <div class=\"volumes-label\">\n            <slot name=\"volumes\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  };\n\n  private renderInfoCard = (): HTMLZResultCardElement => {\n    return (\n      <Host\n        tabIndex={0}\n        class=\"info-card\"\n      >\n        <div class=\"info-icon-column\">\n          <div class=\"info-icon-container\">\n            <z-icon\n              class=\"info-icon\"\n              name=\"link\"\n              width={18}\n              height={18}\n            />\n          </div>\n        </div>\n        <div class=\"info-container\">\n          <span\n            class=\"card-title info-title\"\n            ref={(el) => (this.titleRef = el as HTMLElement)}\n          >\n            {this.cardTitle}\n          </span>\n          <span\n            class=\"card-subtitle info-subtitle\"\n            ref={(el) => (this.subtitleRef = el as HTMLElement)}\n          >\n            {this.cardSubtitle}\n          </span>\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n  }\n}\n"],"version":3}