npm - @zanichelli/albe-web-components - Versions diffs - 15.0.1-RC → 15.0.2 - Mend

@zanichelli/albe-web-components 15.0.1-RC → 15.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (372) hide show

package/dist/components/index26.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index26.js","mappings":"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","names":[],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n --z-searchbar-tag-text-color: var(--color-primary03);\n --z-searchbar-tag-bg: var(--color-hover-primary);\n\n z-index: 15;\n display: flex;\n column-gap: calc(var(--space-unit) * 2);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n.input-container {\n position: relative;\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n.results-wrapper {\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n width: 100%;\n padding: calc(var(--space-unit) / 4);\n border: var(--border-size-small) solid var(--color-surface03);\n border-top: none;\n background: var(--color-surface01);\n}\n\n.results {\n overflow: auto;\n max-height: var(--z-searchbar-results-height, 540px);\n padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n.results::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n.results::-webkit-scrollbar-track {\n background-color: transparent;\n}\n\n.results::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n}\n\n.results .category-heading {\n display: block;\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n line-height: var(--font-size-3);\n}\n\n.results .category-heading > * {\n display: block;\n}\n\n.results .category-heading > .category {\n color: var(--color-text05);\n font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n margin-top: var(--space-unit);\n color: var(--color-default-text);\n text-transform: uppercase;\n}\n\n.results z-list-element {\n display: block;\n}\n\n.results z-list-element > .list-element {\n display: flex;\n justify-content: space-between;\n}\n\n.results z-list-element > .list-element > z-tag {\n border: 1px solid var(--gray800);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n\n --z-tag-bg: var(--z-searchbar-tag-bg);\n --z-tag-text-color: var(--z-searchbar-tag-text-color);\n}\n\n.results .item {\n --z-icon-height: 12px;\n --z-icon-width: 12px;\n\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n color: var(--color-default-text);\n column-gap: calc(var(--space-unit) * 1.5);\n fill: var(--color-default-icon);\n font-size: var(--font-size-2);\n line-height: var(--font-size-3);\n}\n\n.results .item.ellipsis > .item-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.results .item > .item-label mark {\n background: var(--color-primary03);\n}\n\n.results .item.has-category {\n padding-left: calc(var(--space-unit) * 3);\n}\n\n.results .item.item-search {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n}\n\n.results .item-show-all {\n text-align: center;\n}\n\n.results .item-no-results {\n display: block;\n font-size: var(--font-size-2);\n font-style: italic;\n line-height: var(--font-size-5);\n}\n\n.results .item-no-results > ul {\n padding-left: calc(var(--space-unit) * 2);\n margin: var(--space-unit);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n .results .category-heading {\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n\n .results .item {\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n\n .results .item.item-search {\n --z-icon-height: 18px;\n --z-icon-width: 18px;\n }\n\n .results .item.ellipsis > .item-label {\n height: 24px;\n }\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n .results .item {\n cursor: pointer;\n }\n\n .results .item-no-results {\n cursor: default;\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n}\n\n:host([size=\"small\"]) .results :is(.item, .category-heading),\n:host([size=\"x-small\"]) .results :is(.item, .category-heading) {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .results .item:not(.has-category),\n:host([size=\"x-small\"]) .results .item:not(.has-category) {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n}\n\n:host([size=\"small\"])::part(list-item-container) {\n min-height: calc(var(--space-unit) 4.5);\n padding: 0;\n}\n\n:host([size=\"x-small\"])::part(list-item-container) {\n min-height: calc(var(--space-unit) * 4);\n padding: 0;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ControlSize,\n Device,\n ListDividerType,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n} from \"../../beans\";\nimport {getDevice, handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n/*\n @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);\n * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);\n /\n@Component({\n tag: \"z-searchbar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSearchbar {\n /* the id of the searchbar element /\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /* Prevent submit action /\n @Prop()\n preventSubmit?: boolean = false;\n\n /* Input search string /\n @Prop()\n value?: string;\n\n /* Search input placeholder /\n @Prop()\n placeholder?: string;\n\n /* Show autocomplete results /\n @Prop()\n autocomplete?: boolean = false;\n\n /* Minimun number of characters to dispatch typing event /\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /* Number of results shown - default all /\n @Prop()\n resultsCount?: number;\n\n /* Truncate results to single row /\n @Prop()\n resultsEllipsis?: boolean = true;\n\n /* Search helper text /\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /* Autocomplete results items /\n @Prop()\n resultsItems?: SearchbarItem[] \| string;\n\n /* Sort autocomplete results items /\n @Prop()\n sortResultsItems?: boolean = false;\n\n /* Show submit button /\n @Prop()\n showSearchButton?: boolean = false;\n\n /* Set button icon without label/\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. /\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount = 0;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @Element() element: HTMLZSearchbarElement;\n\n private resultsItemsList: SearchbarItem[] \| undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n private resizeObserver: ResizeObserver;\n\n /* Emitted on search submit, return search string /\n @Event()\n searchSubmit: EventEmitter<string>;\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n /* Emitted on search typing, return search string /\n @Event()\n searchTyping: EventEmitter<string>;\n\n private emitSearchTyping(search: string): void {\n this.searchTyping.emit(search);\n }\n\n /* Emitted on search result click, return item /\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.emitSearchTyping(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n if (getDevice() === Device.MOBILE && !this.isMobile) {\n this.isMobile = true;\n }\n if (getDevice() !== Device.MOBILE && this.isMobile) {\n this.isMobile = false;\n }\n });\n this.resizeObserver.observe(this.element);\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n this.currResultsCount = this.resultsCount;\n }\n\n private getResultsItemsList(): SearchbarItem[] \| undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(items: SearchbarItem[]): SearchbarGroupedItem {\n const groupedItems = {};\n items.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private checkResultsCount(counter: number): boolean {\n if (!this.currResultsCount \|\| counter < this.currResultsCount) {\n return true;\n }\n\n return false;\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n\n const searchbar = cp.find((elem: HTMLElement) => elem.nodeName === \"Z-SEARCHBAR\");\n if (!searchbar \|\| (searchbar as HTMLZSearchbarElement).htmlid !== this.htmlid) {\n this.showResults = false;\n\n return;\n }\n\n if (cp.find((elem: HTMLElement) => elem?.nodeName === \"Z-INPUT\" \|\| elem?.classList?.contains(\"results\"))) {\n this.showResults = true;\n\n return;\n }\n\n this.showResults = false;\n }\n\n private renderInput(): HTMLZInputElement {\n return (\n <z-input\n ref={(val) => {\n this.inputRef = val;\n }}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.handleSubmit())}\n value={this.value}\n ariaLabel={this.placeholder}\n size={this.size}\n />\n );\n }\n\n private renderButton(): HTMLZButtonElement \| null {\n if (!this.showSearchButton) {\n return null;\n }\n\n const iconProp = this.searchButtonIconOnly ? {icon: \"search\"} : null;\n const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n const defaultProps = {\n disabled: this.preventSubmit,\n variant: this.variant,\n size: this.size,\n onClick: () => this.handleSubmit(),\n ...iconProp,\n };\n\n return <z-button {...defaultProps}>{buttonLabel}</z-button>;\n }\n\n private renderResults(): HTMLDivElement \| null {\n if (\n !this.showResults \|\|\n !this.autocomplete \|\|\n !this.searchString \|\|\n this.searchString.length < this.autocompleteMinChars \|\|\n !this.resultsItemsList\n ) {\n return null;\n }\n\n return (\n <div class=\"results-wrapper\">\n <div class=\"results\">{this.renderResultsList()}</div>\n </div>\n );\n }\n\n private renderResultsList(): HTMLZListElement \| HTMLSpanElement {\n if (this.preventSubmit && !this.resultsItemsList?.length) {\n return (\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </span>\n );\n }\n\n return (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n >\n {this.renderSearchHelper(!!this.resultsItemsList?.length)}\n {this.renderItems()}\n {this.renderShowAllResults()}\n </z-list>\n );\n }\n\n private renderItems(): HTMLZListGroupElement[] {\n if (!this.resultsItemsList?.length) {\n return [];\n }\n\n const groupedItems = this.getGroupedItems(this.resultsItemsList);\n const listGroups: HTMLZListGroupElement[] = [];\n let counter = 0;\n\n Object.values(groupedItems).forEach((groupItem: SearchbarGroup, index: number, array) => {\n if (this.checkResultsCount(counter)) {\n const listGroupsElements: HTMLZListElement[] = [];\n groupItem.items.forEach((item: SearchbarItem, subindex: number, subarray) => {\n if (this.checkResultsCount(counter)) {\n const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n }\n counter++;\n });\n\n if (listGroupsElements.length) {\n listGroups.push(\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n {this.renderItemCategory(groupItem)}\n {listGroupsElements}\n </z-list-group>\n );\n }\n }\n });\n\n return listGroups;\n }\n\n private renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${key}`}\n role=\"option\"\n tabindex={0}\n dividerType={divider ? ListDividerType.ELEMENT : undefined}\n clickable\n onClickItem={() => this.emitSearchItemClick(item)}\n >\n <div class=\"list-element\">\n <span class={{\"item\": true, \"ellipsis\": this.resultsEllipsis, \"has-category\": !!item.category}}>\n {item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n <span\n class=\"item-label\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n </span>\n {item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n </z-list-element>\n );\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItemCategory(groupItem: SearchbarGroup): HTMLSpanElement \| null {\n if (!groupItem?.category) {\n return null;\n }\n\n return (\n <span\n class=\"category-heading\"\n slot=\"header-title\"\n >\n <span class=\"category\">{groupItem.category}</span>\n {groupItem?.subcategory && <span class=\"subcategory\">{groupItem.subcategory}</span>}\n </span>\n );\n }\n\n private renderSearchHelper(hasDivider = true): HTMLZListElement \| null {\n if (!this.autocomplete \|\| this.preventSubmit \|\| !this.searchString) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n clickable\n id={`list-item-${this.htmlid}-search`}\n onClickItem={() => this.emitSearchSubmit()}\n >\n <span class=\"item item-search\">\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <span\n class=\"item-label\"\n innerHTML={this.searchHelperLabel.replace(\"{searchString}\", `<mark>${this.searchString}</mark>`)}\n />\n </span>\n </z-list-element>\n );\n }\n\n private renderShowAllResults(): HTMLZListElement \| null {\n if (\n !this.currResultsCount \|\|\n !this.searchString \|\|\n !this.resultsItemsList?.length \|\|\n this.currResultsCount >= this.resultsItemsList?.length\n ) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n clickable\n id={`list-item-${this.htmlid}-show-all`}\n onClickItem={() => (this.currResultsCount = 0)}\n color=\"color-primary01\"\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n );\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e) => this.handleOutsideClick(e)}\n class={{\"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete}}\n >\n <div class=\"input-container\">\n {this.renderInput()}\n {this.renderResults()}\n </div>\n {this.renderButton()}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index26.js","mappings":"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","names":[],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n --z-searchbar-tag-text-color: var(--color-primary03);\n --z-searchbar-tag-bg: var(--color-hover-primary);\n\n z-index: 15;\n display: flex;\n column-gap: calc(var(--space-unit) * 2);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n.input-container {\n position: relative;\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n.results-wrapper {\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n width: 100%;\n padding: calc(var(--space-unit) / 4);\n border: var(--border-size-small) solid var(--color-surface03);\n border-top: none;\n background: var(--color-surface01);\n}\n\n.results {\n overflow: auto;\n max-height: var(--z-searchbar-results-height, 540px);\n padding: calc(var(--space-unit) / 2) calc(var(--space-unit) 1.5);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n.results::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n.results::-webkit-scrollbar-track {\n background-color: transparent;\n}\n\n.results::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n}\n\n.results .category-heading {\n display: block;\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n line-height: var(--font-size-3);\n}\n\n.results .category-heading > * {\n display: block;\n}\n\n.results .category-heading > .category {\n color: var(--color-text05);\n font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n margin-top: var(--space-unit);\n color: var(--color-default-text);\n text-transform: uppercase;\n}\n\n.results z-list-element {\n display: block;\n}\n\n.results z-list-element > .list-element {\n display: flex;\n justify-content: space-between;\n}\n\n.results z-list-element > .list-element > z-tag {\n border: 1px solid var(--gray800);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n\n --z-tag-bg: var(--z-searchbar-tag-bg);\n --z-tag-text-color: var(--z-searchbar-tag-text-color);\n}\n\n.results .item {\n --z-icon-height: 12px;\n --z-icon-width: 12px;\n\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n color: var(--color-default-text);\n column-gap: calc(var(--space-unit) * 1.5);\n fill: var(--color-default-icon);\n font-size: var(--font-size-2);\n line-height: var(--font-size-3);\n}\n\n.results .item.ellipsis > .item-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.results .item > .item-label mark {\n background: var(--color-primary03);\n}\n\n.results .item.has-category {\n padding-left: calc(var(--space-unit) * 3);\n}\n\n.results .item.item-search {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n}\n\n.results .item-show-all {\n text-align: center;\n}\n\n.results .item-no-results {\n display: block;\n font-size: var(--font-size-2);\n font-style: italic;\n line-height: var(--font-size-5);\n}\n\n.results .item-no-results > ul {\n padding-left: calc(var(--space-unit) * 2);\n margin: var(--space-unit);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n .results .category-heading {\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n\n .results .item {\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n\n .results .item.item-search {\n --z-icon-height: 18px;\n --z-icon-width: 18px;\n }\n\n .results .item.ellipsis > .item-label {\n height: 24px;\n }\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n .results .item {\n cursor: pointer;\n }\n\n .results .item-no-results {\n cursor: default;\n font-size: var(--font-size-3);\n line-height: var(--font-size-6);\n }\n}\n\n:host([size=\"small\"]) .results :is(.item, .category-heading),\n:host([size=\"x-small\"]) .results :is(.item, .category-heading) {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .results .item:not(.has-category),\n:host([size=\"x-small\"]) .results .item:not(.has-category) {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n}\n\n:host([size=\"small\"])::part(list-item-container) {\n min-height: calc(var(--space-unit) 4.5);\n padding: 0;\n}\n\n:host([size=\"x-small\"])::part(list-item-container) {\n min-height: calc(var(--space-unit) * 4);\n padding: 0;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ControlSize,\n Device,\n ListDividerType,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n} from \"../../beans\";\nimport {getDevice, handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n/*\n @cssprop --z-searchbar-results-height - Max height of the results container (default: 540px)\n * @cssprop --z-searchbar-tag-text-color - Color of tag's text (default --color-primary03);\n * @cssprop --z-searchbar-tag-bg - Color of tag's background (default --color-hover-primary);\n /\n@Component({\n tag: \"z-searchbar\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSearchbar {\n /* the id of the searchbar element /\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /* Prevent submit action /\n @Prop()\n preventSubmit?: boolean = false;\n\n /* Input search string /\n @Prop()\n value?: string;\n\n /* Search input placeholder /\n @Prop()\n placeholder?: string;\n\n /* Show autocomplete results /\n @Prop()\n autocomplete?: boolean = false;\n\n /* Minimun number of characters to dispatch typing event /\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /* Number of results shown - default all /\n @Prop()\n resultsCount?: number;\n\n /* Truncate results to single row /\n @Prop()\n resultsEllipsis?: boolean = true;\n\n /* Search helper text /\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /* Autocomplete results items /\n @Prop()\n resultsItems?: SearchbarItem[] \| string;\n\n /* Sort autocomplete results items /\n @Prop()\n sortResultsItems?: boolean = false;\n\n /* Show submit button /\n @Prop()\n showSearchButton?: boolean = false;\n\n /* Set button icon without label/\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /* Available sizes: `big`, `small` and `x-small`. Defaults to `big`. /\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /* Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. /\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount = 0;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @Element() element: HTMLZSearchbarElement;\n\n private resultsItemsList: SearchbarItem[] \| undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n private resizeObserver: ResizeObserver;\n\n /* Emitted on search submit, return search string /\n @Event()\n searchSubmit: EventEmitter<string>;\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n /* Emitted on search typing, return search string /\n @Event()\n searchTyping: EventEmitter<string>;\n\n private emitSearchTyping(search: string): void {\n this.searchTyping.emit(search);\n }\n\n /* Emitted on search result click, return item /\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.emitSearchTyping(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n componentDidLoad(): void {\n this.resizeObserver = new ResizeObserver(() => {\n if (getDevice() === Device.MOBILE && !this.isMobile) {\n this.isMobile = true;\n }\n if (getDevice() !== Device.MOBILE && this.isMobile) {\n this.isMobile = false;\n }\n });\n this.resizeObserver.observe(this.element);\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n this.currResultsCount = this.resultsCount;\n }\n\n private getResultsItemsList(): SearchbarItem[] \| undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(items: SearchbarItem[]): SearchbarGroupedItem {\n const groupedItems = {};\n items.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private checkResultsCount(counter: number): boolean {\n if (!this.currResultsCount \|\| counter < this.currResultsCount) {\n return true;\n }\n\n return false;\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n\n const searchbar = cp.find((elem: HTMLElement) => elem.nodeName === \"Z-SEARCHBAR\");\n if (!searchbar \|\| (searchbar as HTMLZSearchbarElement).htmlid !== this.htmlid) {\n this.showResults = false;\n\n return;\n }\n\n if (cp.find((elem: HTMLElement) => elem?.nodeName === \"Z-INPUT\" \|\| elem?.classList?.contains(\"results\"))) {\n this.showResults = true;\n\n return;\n }\n\n this.showResults = false;\n }\n\n private renderInput(): HTMLZInputElement {\n return (\n <z-input\n ref={(val) => {\n this.inputRef = val;\n }}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => handleEnterKeydSubmit(e, () => this.handleSubmit())}\n value={this.value}\n ariaLabel={this.placeholder}\n size={this.size}\n />\n );\n }\n\n private renderButton(): HTMLZButtonElement \| null {\n if (!this.showSearchButton) {\n return null;\n }\n\n const iconProp = this.searchButtonIconOnly ? {icon: \"search\"} : null;\n const buttonLabel = this.searchButtonIconOnly ? \"\" : \"CERCA\";\n const defaultProps = {\n disabled: this.preventSubmit,\n variant: this.variant,\n size: this.size,\n onClick: () => this.handleSubmit(),\n ...iconProp,\n };\n\n return <z-button {...defaultProps}>{buttonLabel}</z-button>;\n }\n\n private renderResults(): HTMLDivElement \| null {\n if (\n !this.showResults \|\|\n !this.autocomplete \|\|\n !this.searchString \|\|\n this.searchString.length < this.autocompleteMinChars \|\|\n !this.resultsItemsList\n ) {\n return null;\n }\n\n return (\n <div class=\"results-wrapper\">\n <div class=\"results\">{this.renderResultsList()}</div>\n </div>\n );\n }\n\n private renderResultsList(): HTMLZListElement \| HTMLSpanElement {\n if (this.preventSubmit && !this.resultsItemsList?.length) {\n return (\n <span class=\"item item-no-results\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </span>\n );\n }\n\n return (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n >\n {this.renderSearchHelper(!!this.resultsItemsList?.length)}\n {this.renderItems()}\n {this.renderShowAllResults()}\n </z-list>\n );\n }\n\n private renderItems(): HTMLZListGroupElement[] {\n if (!this.resultsItemsList?.length) {\n return [];\n }\n\n const groupedItems = this.getGroupedItems(this.resultsItemsList);\n const listGroups: HTMLZListGroupElement[] = [];\n let counter = 0;\n\n Object.values(groupedItems).forEach((groupItem: SearchbarGroup, index: number, array) => {\n if (this.checkResultsCount(counter)) {\n const listGroupsElements: HTMLZListElement[] = [];\n groupItem.items.forEach((item: SearchbarItem, subindex: number, subarray) => {\n if (this.checkResultsCount(counter)) {\n const isLast = index === array.length - 1 && subindex === subarray.length - 1;\n listGroupsElements.push(this.renderItem(item, subindex, !isLast));\n }\n counter++;\n });\n\n if (listGroupsElements.length) {\n listGroups.push(\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n {this.renderItemCategory(groupItem)}\n {listGroupsElements}\n </z-list-group>\n );\n }\n }\n });\n\n return listGroups;\n }\n\n private renderItem(item: SearchbarItem, key: number, divider: boolean): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${key}`}\n role=\"option\"\n tabindex={0}\n dividerType={divider ? ListDividerType.ELEMENT : undefined}\n clickable\n onClickItem={() => this.emitSearchItemClick(item)}\n >\n <div class=\"list-element\">\n <span class={{\"item\": true, \"ellipsis\": this.resultsEllipsis, \"has-category\": !!item.category}}>\n {item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n <span\n class=\"item-label\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n </span>\n {item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n </z-list-element>\n );\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.+?^${}()\|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItemCategory(groupItem: SearchbarGroup): HTMLSpanElement \| null {\n if (!groupItem?.category) {\n return null;\n }\n\n return (\n <span\n class=\"category-heading\"\n slot=\"header-title\"\n >\n <span class=\"category\">{groupItem.category}</span>\n {groupItem?.subcategory && <span class=\"subcategory\">{groupItem.subcategory}</span>}\n </span>\n );\n }\n\n private renderSearchHelper(hasDivider = true): HTMLZListElement \| null {\n if (!this.autocomplete \|\| this.preventSubmit \|\| !this.searchString) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n dividerType={hasDivider ? ListDividerType.ELEMENT : undefined}\n clickable\n id={`list-item-${this.htmlid}-search`}\n onClickItem={() => this.emitSearchSubmit()}\n >\n <span class=\"item item-search\">\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <span\n class=\"item-label\"\n innerHTML={this.searchHelperLabel.replace(\"{searchString}\", `<mark>${this.searchString}</mark>`)}\n />\n </span>\n </z-list-element>\n );\n }\n\n private renderShowAllResults(): HTMLZListElement \| null {\n if (\n !this.currResultsCount \|\|\n !this.searchString \|\|\n !this.resultsItemsList?.length \|\|\n this.currResultsCount >= this.resultsItemsList?.length\n ) {\n return null;\n }\n\n return (\n <z-list-element\n role=\"option\"\n tabindex={0}\n clickable\n id={`list-item-${this.htmlid}-show-all`}\n onClickItem={() => (this.currResultsCount = 0)}\n color=\"color-primary01\"\n >\n <div class=\"item-show-all\">Vedi tutti i risultati</div>\n </z-list-element>\n );\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e) => this.handleOutsideClick(e)}\n class={{\"has-submit\": this.showSearchButton, \"has-results\": this.autocomplete}}\n >\n <div class=\"input-container\">\n {this.renderInput()}\n {this.renderResults()}\n </div>\n {this.renderButton()}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-app-header.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { d as defineCustomElement$4 } from './index21.js';
 import { d as defineCustomElement$3 } from './index26.js';
 import { d as defineCustomElement$2 } from './index27.js';
-const stylesCss = ":host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-default-text);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-default-text);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{-webkit-box-sizing:border-box;box-sizing:border-box}.heading-panel{position:relative;display:-ms-flexbox;display:flex;width:100%;max-width:var(--app-header-content-max-width);-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:baseline;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:-ms-flexbox;display:flex;width:100%;max-width:100%;-ms-flex:1 auto;flex:1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start}.heading-title{display:-ms-flexbox;display:flex;max-width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;-webkit-column-gap:calc(var(--space-unit) * 2);-moz-column-gap:calc(var(--space-unit) * 2);column-gap:calc(var(--space-unit) * 2)}::slotted([slot=\"title\"]),.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-weight:var(--font-bd)}::slotted([slot=\"title\"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot=\"top-subtitle\"]),::slotted([slot=\"subtitle\"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;line-height:26px}::slotted([slot=\"subtitle\"]){font-weight:500}::slotted([slot=\"top-subtitle\"]){font-weight:400}.menu-container{display:-ms-flexbox;display:flex;width:100%;-ms-flex:1 auto;flex:1 auto;-ms-flex-flow:row wrap;flex-flow:row wrap}:host([menu-length=\"0\"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:-ms-flexbox;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);-ms-flex:1 auto;flex:1 auto;-ms-flex-align:center;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;-webkit-animation:slide-stuck-heading-in 250ms ease-out;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:-ms-flexbox;display:flex;max-width:var(--app-header-content-max-width);-ms-flex-align:center;align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;-webkit-column-gap:calc(var(--space-unit) * 2);-moz-column-gap:calc(var(--space-unit) * 2);column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title{overflow:hidden}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:-ms-flexbox;display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));-ms-flex-align:center;align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:none}z-offcanvas[open] .drawer-content{display:-ms-flexbox;display:flex;width:100%;-ms-flex:1 auto;flex:1 auto;-ms-flex-direction:column;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top center;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow=\"offcanvas\"],[menu-length=\"0\"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}.menu-container{-ms-flex:initial;flex:initial;-ms-flex-align:center;align-items:center}:host([menu-length=\"0\"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow=\"offcanvas\"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{-ms-flex-pack:start;justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow=\"stack\"]) .heading-panel{-ms-flex-flow:column;flex-flow:column;-ms-flex-align:start;align-items:flex-start}:host([flow=\"stack\"]) .menu-container{width:100%}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);-ms-flex:initial;flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@-webkit-keyframes slide-stuck-heading-in{0%{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}100%{-webkit-transform:none;transform:none}}@keyframes slide-stuck-heading-in{0%{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}100%{-webkit-transform:none;transform:none}}";
+const stylesCss = ":host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-default-text);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-default-text);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{-webkit-box-sizing:border-box;box-sizing:border-box}.heading-panel{position:relative;display:-ms-flexbox;display:flex;width:100%;max-width:var(--app-header-content-max-width);-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:baseline;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:-ms-flexbox;display:flex;width:100%;max-width:100%;-ms-flex:1 auto;flex:1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start}.heading-title{display:-ms-flexbox;display:flex;max-width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;-webkit-column-gap:calc(var(--space-unit) * 2);-moz-column-gap:calc(var(--space-unit) * 2);column-gap:calc(var(--space-unit) * 2)}::slotted([slot=\"title\"]),.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-weight:var(--font-bd)}::slotted([slot=\"title\"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot=\"top-subtitle\"]),::slotted([slot=\"subtitle\"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;line-height:26px}::slotted([slot=\"subtitle\"]){font-weight:500}::slotted([slot=\"top-subtitle\"]){font-weight:400}.menu-container{display:-ms-flexbox;display:flex;width:100%;-ms-flex:1 auto;flex:1 auto;-ms-flex-flow:row wrap;flex-flow:row wrap}:host([menu-length=\"0\"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:-ms-flexbox;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);-ms-flex:1 auto;flex:1 auto;-ms-flex-align:center;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;-webkit-animation:slide-stuck-heading-in 250ms ease-out;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:-ms-flexbox;display:flex;max-width:var(--app-header-content-max-width);-ms-flex-align:center;align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;-webkit-column-gap:calc(var(--space-unit) * 2);-moz-column-gap:calc(var(--space-unit) * 2);column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title{overflow:hidden}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger:focus-visible{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:-ms-flexbox;display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));-ms-flex-align:center;align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:none}z-offcanvas[open] .drawer-content{display:-ms-flexbox;display:flex;width:100%;-ms-flex:1 auto;flex:1 auto;-ms-flex-direction:column;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top center;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow=\"offcanvas\"],[menu-length=\"0\"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}.menu-container{-ms-flex:initial;flex:initial;-ms-flex-align:center;align-items:center}:host([menu-length=\"0\"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow=\"offcanvas\"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{-ms-flex-pack:start;justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow=\"stack\"]) .heading-panel{-ms-flex-flow:column;flex-flow:column;-ms-flex-align:start;align-items:flex-start}:host([flow=\"stack\"]) .menu-container{width:100%}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);-ms-flex:initial;flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@-webkit-keyframes slide-stuck-heading-in{0%{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}100%{-webkit-transform:none;transform:none}}@keyframes slide-stuck-heading-in{0%{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}100%{-webkit-transform:none;transform:none}}";
 const ZAppHeaderStyle0 = stylesCss;
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";

package/dist/components/z-app-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-app-header.js","mappings":"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","names":["ZAppHeader"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx"],"sourcesContent":[":host {\n --app-header-typography-1-size: 24px;\n --app-header-typography-2-size: 28px;\n --app-header-typography-3-size: 32px;\n --app-header-typography-4-size: 36px;\n --app-header-typography-5-size: 42px;\n --app-header-typography-6-size: 48px;\n --app-header-typography-7-size: 54px;\n --app-header-typography-8-size: 60px;\n --app-header-typography-9-size: 68px;\n --app-header-typography-10-size: 76px;\n --app-header-typography-11-size: 84px;\n --app-header-typography-12-size: 92px;\n --app-header-typography-1-lineheight: 1.33;\n --app-header-typography-2-lineheight: 1.29;\n --app-header-typography-3-lineheight: 1.25;\n --app-header-typography-4-lineheight: 1.24;\n --app-header-typography-5-lineheight: 1.24;\n --app-header-typography-6-lineheight: 1.25;\n --app-header-typography-7-lineheight: 1.2;\n --app-header-typography-8-lineheight: 1.26;\n --app-header-typography-9-lineheight: 1.24;\n --app-header-typography-10-lineheight: 1.26;\n --app-header-typography-11-lineheight: 1.2;\n --app-header-typography-12-lineheight: 1.2;\n --app-header-typography-1-tracking: calc(-0.2 / 1em);\n --app-header-typography-2-tracking: calc(-0.4 / 1em);\n --app-header-typography-3-tracking: calc(-0.6 / 1em);\n --app-header-typography-4-tracking: calc(-0.8 / 1em);\n --app-header-typography-5-tracking: calc(-1 / 1em);\n --app-header-typography-6-tracking: calc(-1.2 / 1em);\n --app-header-typography-7-tracking: calc(-1.4 / 1em);\n --app-header-typography-8-tracking: calc(-1.6 / 1em);\n --app-header-typography-9-tracking: calc(-1.8 / 1em);\n --app-header-typography-10-tracking: calc(-2 / 1em);\n --app-header-typography-11-tracking: calc(-2.2 / 1em);\n --app-header-typography-12-tracking: calc(-2.4 / 1em);\n --app-header-content-max-width: 100%;\n --app-header-height: auto;\n\n /* Variable to set stuck header and drawer's top offset.\n Useful when something is absolutely positioned above the header. /\n --app-header-top-offset: 48px;\n --app-header-drawer-trigger-size: calc(var(--space-unit) 4);\n\n /* Variable to customize header background color. /\n --app-header-bg: var(--color-surface01);\n\n / Variable to customize stuck header background color. /\n --app-header-stucked-bg: var(--color-surface01);\n\n / Variable to customize text and icon color. /\n --app-header-text-color: var(--color-default-text);\n\n / Variable to customize the title's font size.\n NOTE: Only use one of the exported `--app-header-typography--size` as a value. /\n --app-header-title-font-size: var(--app-header-typography-3-size);\n\n /* Variable to customize the title's line-height.\n NOTE: Only use one of the exported `--app-header-typography--lineheight` as a value\n and use the same level as the one of the font size. /\n --app-header-title-lineheight: var(--app-header-typography-3-lineheight);\n\n /* Variable to customize the title's letter-spacing.\n NOTE: Only use one of the exported `--app-header-typography--tracking` as a value\n and use the same level as the one of the font size. /\n --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);\n\n /* Variable to customize stuck header's text and icon color. /\n --app-header-stucked-text-color: var(--color-default-text);\n\n position: relative;\n display: block;\n height: var(--app-header-height);\n color: var(--app-header-text-color);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.heading-panel {\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--app-header-content-max-width);\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: baseline;\n padding: var(--grid-margin);\n margin: 0 auto;\n background: var(--app-header-bg);\n gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n}\n\n.hero-container + .heading-panel {\n background: transparent;\n}\n\n:host(:empty) .heading-panel {\n padding: 0;\n}\n\n.heading-container {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n max-width: 100%;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.heading-title {\n display: flex;\n max-width: 100%;\n flex-direction: row;\n align-items: flex-start;\n column-gap: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"title\"]),\n.heading-stuck .heading-title > ,\n::slotted([slot=\"stucked-title\"]) {\n margin: 0;\n font-family: \"IBM Plex Serif\", serif;\n font-weight: var(--font-bd);\n}\n\n::slotted([slot=\"title\"]) {\n font-size: var(--app-header-title-font-size);\n letter-spacing: var(--app-header-title-letter-spacing);\n line-height: var(--app-header-title-lineheight);\n}\n\n.heading-stuck .heading-title > ,\n::slotted([slot=\"stucked-title\"]) {\n font-size: var(--app-header-typography-3-size);\n letter-spacing: var(--app-header-typography-3-tracking);\n line-height: var(--app-header-typography-3-lineheight);\n}\n\n:host(:not([menu-length=\"0\"])) .heading-subtitle {\n padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));\n}\n\n::slotted([slot=\"top-subtitle\"]),\n::slotted([slot=\"subtitle\"]) {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 20px;\n font-style: italic;\n line-height: 26px;\n}\n\n::slotted([slot=\"subtitle\"]) {\n font-weight: 500;\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n font-weight: 400;\n}\n\n.menu-container {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-flow: row wrap;\n}\n\n:host([menu-length=\"0\"]:not([enable-search])) .menu-container,\n.menu-container:empty {\n display: none;\n}\n\n.menu-container ::slotted([open]) {\n position: relative;\n z-index: 3;\n}\n\nz-searchbar {\n z-index: 0;\n display: flex;\n width: auto;\n min-width: calc(var(--space-unit) * 32);\n flex: 1 auto;\n align-items: center;\n margin-left: auto;\n}\n\n.heading-stuck {\n position: fixed;\n z-index: 20;\n top: var(--app-header-top-offset);\n left: 0;\n width: 100%;\n max-width: 100%;\n animation: slide-stuck-heading-in 250ms ease-out;\n background: var(--app-header-stucked-bg);\n box-shadow: var(--shadow-2);\n color: var(--app-header-stucked-text-color);\n}\n\n.heading-stuck-content {\n display: flex;\n max-width: var(--app-header-content-max-width);\n align-items: center;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n column-gap: calc(var(--space-unit) * 2);\n}\n\n.heading-stuck .heading-title {\n overflow: hidden;\n}\n\n.heading-stuck .heading-title > ,\n.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]) {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.heading-stuck-content z-button {\n margin-left: auto;\n}\n\n.drawer-trigger {\n padding: 0;\n border: 0;\n margin: 0;\n appearance: none;\n background: none;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n}\n\n.drawer-trigger z-icon {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n fill: currentcolor;\n}\n\n/ Simulate the height of the first line of text,\nto correctly align drawer icon and search page button with the title /\n.heading-container :is(.drawer-trigger, z-button.search-page-button) {\n display: flex;\n height: calc(var(--app-header-title-font-size) var(--app-header-title-lineheight));\n align-items: center;\n}\n\n.heading-container z-button.search-page-button {\n margin-left: auto;\n}\n\n.drawer-content {\n display: none;\n}\n\nz-offcanvas[open] .drawer-content {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-direction: column;\n row-gap: calc(var(--space-unit) * 2.5);\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n width: 100%;\n}\n\n.drawer-close {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n padding: 0;\n border: 0;\n margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n appearance: none;\n background: transparent;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n fill: currentcolor;\n font-size: inherit;\n outline: none;\n}\n\n.drawer-close:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.hero-container {\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n:host([overlay]) .heading-panel .drawer-trigger z-icon,\n:host([overlay]) .heading-panel .heading-container,\n:host([overlay]) .heading-panel .menu-container {\n color: var(--color-white);\n fill: var(--color-white);\n}\n\n:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {\n --z-menu-label-color: var(--color-white);\n}\n\n:host([overlay]) .hero-container::after {\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-black);\n content: \"\";\n opacity: 0.5;\n}\n\n.hero-container img,\n.hero-container ::slotted() {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: top center;\n -webkit-user-drag: none;\n}\n\n/ Tablet breakpoint /\n@media (min-width: 768px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-6-size);\n --app-header-title-lineheight: var(--app-header-typography-6-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);\n }\n\n .heading-panel {\n flex-flow: row wrap;\n align-items: center;\n padding-bottom: calc(var(--space-unit) 2);\n }\n\n .heading-container {\n margin-right: auto;\n }\n\n :host(:is([flow=\"offcanvas\"], [menu-length=\"0\"])) :is(.heading-container, .menu-container) {\n width: auto;\n }\n\n :host(:not([flow=\"offcanvas\"])) .heading-subtitle {\n padding-left: 0;\n }\n\n .menu-container {\n flex: initial;\n align-items: center;\n }\n\n :host([menu-length=\"0\"]) .menu-container:not(:empty) {\n height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n }\n\n :host(:not([flow=\"offcanvas\"])) .menu-container {\n gap: var(--space-unit) calc(var(--space-unit) * 5);\n }\n\n :host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger {\n display: none;\n }\n}\n\n/* Desktop breakpoint /\n@media (min-width: 1152px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-7-size);\n --app-header-title-lineheight: var(--app-header-typography-7-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);\n }\n\n .heading-panel {\n justify-content: flex-start;\n padding-bottom: calc(var(--space-unit) 3);\n }\n\n .heading-container,\n .menu-container {\n width: auto;\n }\n\n :host([flow=\"stack\"]) .heading-panel {\n flex-flow: column;\n align-items: flex-start;\n }\n\n :host([flow=\"stack\"]) .menu-container {\n width: 100%;\n }\n\n :host(:not([flow=\"offcanvas\"], [menu-length=\"0\"])) .heading-panel {\n row-gap: calc(var(--space-unit) * 3);\n }\n\n z-searchbar {\n min-width: calc(var(--space-unit) * 45);\n flex: initial;\n }\n}\n\n/* Wide breakpoint /\n@media (min-width: 1366px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-9-size);\n --app-header-title-lineheight: var(--app-header-typography-9-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);\n }\n}\n\n@keyframes slide-stuck-heading-in {\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n\n 100% {\n transform: none;\n }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/\n @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-height - Defaults to `auto`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.\n * @cssprop --app-header-title-font-size - Variable to customize the title's font size.\n * NOTE: Only use one of the exported `--app-header-typography--size` as a value.\n Defaults to `--app-header-typography-3-size`.\n * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.\n * NOTE: Only use one of the exported `--app-header-typography--lineheight` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-lineheight`.\n * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.\n * NOTE: Only use one of the exported `--app-header-typography--tracking` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-tracking`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n /\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /\n Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n /\n @Prop({reflect: true})\n stuck = false;\n\n /\n Set the hero image source for the header.\n * You can also use a [slot=\"hero\"] node for advanced customization.\n /\n @Prop()\n hero: string;\n\n /\n Should place an overlay over the hero image.\n * Useful for legibility purpose.\n /\n @Prop({reflect: true})\n overlay = false;\n\n /\n Control menu bar position in the header.\n * - auto: the menu bar is positioned near the title\n * - stack: the menu bar is positioned below the title\n * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n /\n @Prop({reflect: true})\n flow: \"auto\" \| \"stack\" \| \"offcanvas\" = \"auto\";\n\n /\n The opening state of the drawer.\n /\n @Prop({reflect: true})\n drawerOpen = false;\n\n /\n Enable the search bar.\n /\n @Prop({reflect: true})\n enableSearch = false;\n\n /\n Placeholder text for the search bar.\n /\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /\n Search string for the search bar.\n /\n @Prop({mutable: true})\n searchString = \"\";\n\n /\n Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n /\n @Prop()\n searchPageUrl: string;\n\n /\n The stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current viewport.\n * Used to change the aspect of the search button (icon only) on mobile and tablet.\n /\n @State()\n private currentViewport: \"mobile\" \| \"tablet\" \| \"desktop\" = \"mobile\";\n\n /\n Current count of menu items.\n /\n @State()\n menuLength: number;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n private container?: HTMLDivElement;\n\n private menuElements?: NodeListOf<HTMLElement>;\n\n private observer?: IntersectionObserver =\n SUPPORT_INTERSECTION_OBSERVER &&\n new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {\n threshold: 0.5,\n }\n );\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n }\n\n @Listen(\"resize\", {target: \"window\", passive: true})\n evaluateViewport(): void {\n if (window.innerWidth < 768) {\n this.currentViewport = \"mobile\";\n } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n this.currentViewport = \"tablet\";\n } else {\n this.currentViewport = \"desktop\";\n }\n }\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n const elements = this.menuElements;\n elements.forEach((element) => {\n (element as HTMLZMenuElement).open = false;\n (element as HTMLZMenuElement).floating = !this.drawerOpen;\n (element as HTMLZMenuElement).verticalContext = this.drawerOpen;\n });\n }\n\n private get title(): string {\n const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n if (titleElement === null) {\n return \"\";\n }\n\n return titleElement.textContent.trim();\n }\n\n private get scrollParent(): Window \| Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body \|\| parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return this.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n }\n\n private get canShowSearchbar(): boolean {\n if (!this.enableSearch) {\n return false;\n }\n\n // Always show the searchbar on desktop, even if a searchPageUrl is set\n if (this.searchPageUrl) {\n return this.currentViewport === \"desktop\";\n }\n\n return true;\n }\n\n /\n Whether the header has a hero image, either as a prop or as a slot.\n */\n private get hasHero(): boolean {\n return !!this.hero \|\| this.hostElement.querySelector(\"[slot=hero]\") !== null;\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n }\n\n private collectMenuElements(): void {\n const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuLength = menuElements.length;\n this.setMenuFloatingMode();\n }\n\n private enableStuckObserver(): void {\n if (this.observer) {\n this.observer.observe(this.container);\n }\n }\n\n private disableStuckMode(): void {\n this._stuck = false;\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n @Watch(\"stuck\")\n onStuckMode(): void {\n if (this.stuck) {\n this.enableStuckObserver();\n } else {\n this.disableStuckMode();\n }\n }\n\n private renderSearchLinkButton(): HTMLZButtonElement \| null {\n if (!this.enableSearch \|\| !this.searchPageUrl \|\| this.currentViewport === \"desktop\") {\n return null;\n }\n\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n ></z-button>\n );\n }\n\n private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={searchButtonIconOnly}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n componentDidLoad(): void {\n this.collectMenuElements();\n this.onStuckMode();\n this.evaluateViewport();\n }\n\n render(): HTMLZAppHeaderElement {\n return (\n <Host menu-length={this.menuLength}>\n {this.hasHero && (\n <div class=\"hero-container\">\n <slot name=\"hero\">\n {this.hero && (\n <img\n alt=\"\"\n src={this.hero}\n />\n )}\n </slot>\n </div>\n )}\n\n <div\n class=\"heading-panel\"\n ref={(el) => (this.container = el)}\n >\n <div class=\"heading-container\">\n <div class=\"heading-subtitle\">\n <slot name=\"top-subtitle\"></slot>\n </div>\n <div class=\"heading-title\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <slot name=\"title\"></slot>\n\n {this.renderSearchLinkButton()}\n </div>\n\n <div class=\"heading-subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n\n {(this.canShowMenu \|\| this.canShowSearchbar) && (\n <div class=\"menu-container\">\n {this.canShowMenu && (\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n )}\n\n {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n </div>\n )}\n </div>\n\n <z-offcanvas\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n >\n <button\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\"></z-icon>\n </button>\n\n <div\n class=\"drawer-content\"\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n </div>\n </z-offcanvas>\n\n {this._stuck && (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <div class=\"heading-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n\n {this.renderSearchLinkButton()}\n {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-app-header.js","mappings":"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","names":["ZAppHeader"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx"],"sourcesContent":[":host {\n --app-header-typography-1-size: 24px;\n --app-header-typography-2-size: 28px;\n --app-header-typography-3-size: 32px;\n --app-header-typography-4-size: 36px;\n --app-header-typography-5-size: 42px;\n --app-header-typography-6-size: 48px;\n --app-header-typography-7-size: 54px;\n --app-header-typography-8-size: 60px;\n --app-header-typography-9-size: 68px;\n --app-header-typography-10-size: 76px;\n --app-header-typography-11-size: 84px;\n --app-header-typography-12-size: 92px;\n --app-header-typography-1-lineheight: 1.33;\n --app-header-typography-2-lineheight: 1.29;\n --app-header-typography-3-lineheight: 1.25;\n --app-header-typography-4-lineheight: 1.24;\n --app-header-typography-5-lineheight: 1.24;\n --app-header-typography-6-lineheight: 1.25;\n --app-header-typography-7-lineheight: 1.2;\n --app-header-typography-8-lineheight: 1.26;\n --app-header-typography-9-lineheight: 1.24;\n --app-header-typography-10-lineheight: 1.26;\n --app-header-typography-11-lineheight: 1.2;\n --app-header-typography-12-lineheight: 1.2;\n --app-header-typography-1-tracking: calc(-0.2 / 1em);\n --app-header-typography-2-tracking: calc(-0.4 / 1em);\n --app-header-typography-3-tracking: calc(-0.6 / 1em);\n --app-header-typography-4-tracking: calc(-0.8 / 1em);\n --app-header-typography-5-tracking: calc(-1 / 1em);\n --app-header-typography-6-tracking: calc(-1.2 / 1em);\n --app-header-typography-7-tracking: calc(-1.4 / 1em);\n --app-header-typography-8-tracking: calc(-1.6 / 1em);\n --app-header-typography-9-tracking: calc(-1.8 / 1em);\n --app-header-typography-10-tracking: calc(-2 / 1em);\n --app-header-typography-11-tracking: calc(-2.2 / 1em);\n --app-header-typography-12-tracking: calc(-2.4 / 1em);\n --app-header-content-max-width: 100%;\n --app-header-height: auto;\n\n /* Variable to set stuck header and drawer's top offset.\n Useful when something is absolutely positioned above the header. /\n --app-header-top-offset: 48px;\n --app-header-drawer-trigger-size: calc(var(--space-unit) 4);\n\n /* Variable to customize header background color. /\n --app-header-bg: var(--color-surface01);\n\n / Variable to customize stuck header background color. /\n --app-header-stucked-bg: var(--color-surface01);\n\n / Variable to customize text and icon color. /\n --app-header-text-color: var(--color-default-text);\n\n / Variable to customize the title's font size.\n NOTE: Only use one of the exported `--app-header-typography--size` as a value. /\n --app-header-title-font-size: var(--app-header-typography-3-size);\n\n /* Variable to customize the title's line-height.\n NOTE: Only use one of the exported `--app-header-typography--lineheight` as a value\n and use the same level as the one of the font size. /\n --app-header-title-lineheight: var(--app-header-typography-3-lineheight);\n\n /* Variable to customize the title's letter-spacing.\n NOTE: Only use one of the exported `--app-header-typography--tracking` as a value\n and use the same level as the one of the font size. /\n --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);\n\n /* Variable to customize stuck header's text and icon color. /\n --app-header-stucked-text-color: var(--color-default-text);\n\n position: relative;\n display: block;\n height: var(--app-header-height);\n color: var(--app-header-text-color);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.heading-panel {\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--app-header-content-max-width);\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: baseline;\n padding: var(--grid-margin);\n margin: 0 auto;\n background: var(--app-header-bg);\n gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n}\n\n.hero-container + .heading-panel {\n background: transparent;\n}\n\n:host(:empty) .heading-panel {\n padding: 0;\n}\n\n.heading-container {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n max-width: 100%;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.heading-title {\n display: flex;\n max-width: 100%;\n flex-direction: row;\n align-items: flex-start;\n column-gap: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"title\"]),\n.heading-stuck .heading-title > ,\n::slotted([slot=\"stucked-title\"]) {\n margin: 0;\n font-family: \"IBM Plex Serif\", serif;\n font-weight: var(--font-bd);\n}\n\n::slotted([slot=\"title\"]) {\n font-size: var(--app-header-title-font-size);\n letter-spacing: var(--app-header-title-letter-spacing);\n line-height: var(--app-header-title-lineheight);\n}\n\n.heading-stuck .heading-title > ,\n::slotted([slot=\"stucked-title\"]) {\n font-size: var(--app-header-typography-3-size);\n letter-spacing: var(--app-header-typography-3-tracking);\n line-height: var(--app-header-typography-3-lineheight);\n}\n\n:host(:not([menu-length=\"0\"])) .heading-subtitle {\n padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));\n}\n\n::slotted([slot=\"top-subtitle\"]),\n::slotted([slot=\"subtitle\"]) {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 20px;\n font-style: italic;\n line-height: 26px;\n}\n\n::slotted([slot=\"subtitle\"]) {\n font-weight: 500;\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n font-weight: 400;\n}\n\n.menu-container {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-flow: row wrap;\n}\n\n:host([menu-length=\"0\"]:not([enable-search])) .menu-container,\n.menu-container:empty {\n display: none;\n}\n\n.menu-container ::slotted([open]) {\n position: relative;\n z-index: 3;\n}\n\nz-searchbar {\n z-index: 0;\n display: flex;\n width: auto;\n min-width: calc(var(--space-unit) * 32);\n flex: 1 auto;\n align-items: center;\n margin-left: auto;\n}\n\n.heading-stuck {\n position: fixed;\n z-index: 20;\n top: var(--app-header-top-offset);\n left: 0;\n width: 100%;\n max-width: 100%;\n animation: slide-stuck-heading-in 250ms ease-out;\n background: var(--app-header-stucked-bg);\n box-shadow: var(--shadow-2);\n color: var(--app-header-stucked-text-color);\n}\n\n.heading-stuck-content {\n display: flex;\n max-width: var(--app-header-content-max-width);\n align-items: center;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n column-gap: calc(var(--space-unit) * 2);\n}\n\n.heading-stuck .heading-title {\n overflow: hidden;\n}\n\n.heading-stuck .heading-title > ,\n.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]) {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.heading-stuck-content z-button {\n margin-left: auto;\n}\n\n.drawer-trigger {\n padding: 0;\n border: 0;\n margin: 0;\n appearance: none;\n background: none;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n}\n\n.drawer-trigger:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n.drawer-trigger z-icon {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n fill: currentcolor;\n}\n\n/ Simulate the height of the first line of text,\nto correctly align drawer icon and search page button with the title /\n.heading-container :is(.drawer-trigger, z-button.search-page-button) {\n display: flex;\n height: calc(var(--app-header-title-font-size) var(--app-header-title-lineheight));\n align-items: center;\n}\n\n.heading-container z-button.search-page-button {\n margin-left: auto;\n}\n\n.drawer-content {\n display: none;\n}\n\nz-offcanvas[open] .drawer-content {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-direction: column;\n row-gap: calc(var(--space-unit) * 2.5);\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n width: 100%;\n}\n\n.drawer-close {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n padding: 0;\n border: 0;\n margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n appearance: none;\n background: transparent;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n fill: currentcolor;\n font-size: inherit;\n outline: none;\n}\n\n.drawer-close:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.hero-container {\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n:host([overlay]) .heading-panel .drawer-trigger z-icon,\n:host([overlay]) .heading-panel .heading-container,\n:host([overlay]) .heading-panel .menu-container {\n color: var(--color-white);\n fill: var(--color-white);\n}\n\n:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {\n --z-menu-label-color: var(--color-white);\n}\n\n:host([overlay]) .hero-container::after {\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-black);\n content: \"\";\n opacity: 0.5;\n}\n\n.hero-container img,\n.hero-container ::slotted() {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: top center;\n -webkit-user-drag: none;\n}\n\n/ Tablet breakpoint /\n@media (min-width: 768px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-6-size);\n --app-header-title-lineheight: var(--app-header-typography-6-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);\n }\n\n .heading-panel {\n flex-flow: row wrap;\n align-items: center;\n padding-bottom: calc(var(--space-unit) 2);\n }\n\n .heading-container {\n margin-right: auto;\n }\n\n :host(:is([flow=\"offcanvas\"], [menu-length=\"0\"])) :is(.heading-container, .menu-container) {\n width: auto;\n }\n\n :host(:not([flow=\"offcanvas\"])) .heading-subtitle {\n padding-left: 0;\n }\n\n .menu-container {\n flex: initial;\n align-items: center;\n }\n\n :host([menu-length=\"0\"]) .menu-container:not(:empty) {\n height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n }\n\n :host(:not([flow=\"offcanvas\"])) .menu-container {\n gap: var(--space-unit) calc(var(--space-unit) * 5);\n }\n\n :host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger {\n display: none;\n }\n}\n\n/* Desktop breakpoint /\n@media (min-width: 1152px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-7-size);\n --app-header-title-lineheight: var(--app-header-typography-7-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);\n }\n\n .heading-panel {\n justify-content: flex-start;\n padding-bottom: calc(var(--space-unit) 3);\n }\n\n .heading-container,\n .menu-container {\n width: auto;\n }\n\n :host([flow=\"stack\"]) .heading-panel {\n flex-flow: column;\n align-items: flex-start;\n }\n\n :host([flow=\"stack\"]) .menu-container {\n width: 100%;\n }\n\n :host(:not([flow=\"offcanvas\"], [menu-length=\"0\"])) .heading-panel {\n row-gap: calc(var(--space-unit) * 3);\n }\n\n z-searchbar {\n min-width: calc(var(--space-unit) * 45);\n flex: initial;\n }\n}\n\n/* Wide breakpoint /\n@media (min-width: 1366px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-9-size);\n --app-header-title-lineheight: var(--app-header-typography-9-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);\n }\n}\n\n@keyframes slide-stuck-heading-in {\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n\n 100% {\n transform: none;\n }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/\n @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-height - Defaults to `auto`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.\n * @cssprop --app-header-title-font-size - Variable to customize the title's font size.\n * NOTE: Only use one of the exported `--app-header-typography--size` as a value.\n Defaults to `--app-header-typography-3-size`.\n * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.\n * NOTE: Only use one of the exported `--app-header-typography--lineheight` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-lineheight`.\n * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.\n * NOTE: Only use one of the exported `--app-header-typography--tracking` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-tracking`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n /\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /\n Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n /\n @Prop({reflect: true})\n stuck = false;\n\n /\n Set the hero image source for the header.\n * You can also use a [slot=\"hero\"] node for advanced customization.\n /\n @Prop()\n hero: string;\n\n /\n Should place an overlay over the hero image.\n * Useful for legibility purpose.\n /\n @Prop({reflect: true})\n overlay = false;\n\n /\n Control menu bar position in the header.\n * - auto: the menu bar is positioned near the title\n * - stack: the menu bar is positioned below the title\n * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n /\n @Prop({reflect: true})\n flow: \"auto\" \| \"stack\" \| \"offcanvas\" = \"auto\";\n\n /\n The opening state of the drawer.\n /\n @Prop({reflect: true})\n drawerOpen = false;\n\n /\n Enable the search bar.\n /\n @Prop({reflect: true})\n enableSearch = false;\n\n /\n Placeholder text for the search bar.\n /\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /\n Search string for the search bar.\n /\n @Prop({mutable: true})\n searchString = \"\";\n\n /\n Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n /\n @Prop()\n searchPageUrl: string;\n\n /\n The stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current viewport.\n * Used to change the aspect of the search button (icon only) on mobile and tablet.\n /\n @State()\n private currentViewport: \"mobile\" \| \"tablet\" \| \"desktop\" = \"mobile\";\n\n /\n Current count of menu items.\n /\n @State()\n menuLength: number;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n private container?: HTMLDivElement;\n\n private menuElements?: NodeListOf<HTMLElement>;\n\n private observer?: IntersectionObserver =\n SUPPORT_INTERSECTION_OBSERVER &&\n new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {\n threshold: 0.5,\n }\n );\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n }\n\n @Listen(\"resize\", {target: \"window\", passive: true})\n evaluateViewport(): void {\n if (window.innerWidth < 768) {\n this.currentViewport = \"mobile\";\n } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n this.currentViewport = \"tablet\";\n } else {\n this.currentViewport = \"desktop\";\n }\n }\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n const elements = this.menuElements;\n elements.forEach((element) => {\n (element as HTMLZMenuElement).open = false;\n (element as HTMLZMenuElement).floating = !this.drawerOpen;\n (element as HTMLZMenuElement).verticalContext = this.drawerOpen;\n });\n }\n\n private get title(): string {\n const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n if (titleElement === null) {\n return \"\";\n }\n\n return titleElement.textContent.trim();\n }\n\n private get scrollParent(): Window \| Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body \|\| parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return this.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n }\n\n private get canShowSearchbar(): boolean {\n if (!this.enableSearch) {\n return false;\n }\n\n // Always show the searchbar on desktop, even if a searchPageUrl is set\n if (this.searchPageUrl) {\n return this.currentViewport === \"desktop\";\n }\n\n return true;\n }\n\n /\n Whether the header has a hero image, either as a prop or as a slot.\n */\n private get hasHero(): boolean {\n return !!this.hero \|\| this.hostElement.querySelector(\"[slot=hero]\") !== null;\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n }\n\n private collectMenuElements(): void {\n const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuLength = menuElements.length;\n this.setMenuFloatingMode();\n }\n\n private enableStuckObserver(): void {\n if (this.observer) {\n this.observer.observe(this.container);\n }\n }\n\n private disableStuckMode(): void {\n this._stuck = false;\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n @Watch(\"stuck\")\n onStuckMode(): void {\n if (this.stuck) {\n this.enableStuckObserver();\n } else {\n this.disableStuckMode();\n }\n }\n\n private renderSearchLinkButton(): HTMLZButtonElement \| null {\n if (!this.enableSearch \|\| !this.searchPageUrl \|\| this.currentViewport === \"desktop\") {\n return null;\n }\n\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n ></z-button>\n );\n }\n\n private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={searchButtonIconOnly}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n componentDidLoad(): void {\n this.collectMenuElements();\n this.onStuckMode();\n this.evaluateViewport();\n }\n\n render(): HTMLZAppHeaderElement {\n return (\n <Host menu-length={this.menuLength}>\n {this.hasHero && (\n <div class=\"hero-container\">\n <slot name=\"hero\">\n {this.hero && (\n <img\n alt=\"\"\n src={this.hero}\n />\n )}\n </slot>\n </div>\n )}\n\n <div\n class=\"heading-panel\"\n ref={(el) => (this.container = el)}\n >\n <div class=\"heading-container\">\n <div class=\"heading-subtitle\">\n <slot name=\"top-subtitle\"></slot>\n </div>\n <div class=\"heading-title\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <slot name=\"title\"></slot>\n\n {this.renderSearchLinkButton()}\n </div>\n\n <div class=\"heading-subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n\n {(this.canShowMenu \|\| this.canShowSearchbar) && (\n <div class=\"menu-container\">\n {this.canShowMenu && (\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n )}\n\n {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n </div>\n )}\n </div>\n\n <z-offcanvas\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n >\n <button\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\"></z-icon>\n </button>\n\n <div\n class=\"drawer-content\"\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n </div>\n </z-offcanvas>\n\n {this._stuck && (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <div class=\"heading-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n\n {this.renderSearchLinkButton()}\n {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-book-card.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { m as mobileBreakpoint } from './breakpoints.js';
 import { r as randomId } from './utils.js';
 import { d as defineCustomElement$2 } from './index9.js';
-const stylesCss = ":host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);--z-book-card-compact-width:262px;--z-book-card-compact-height:568px}:host>article{display:block;width:100%;max-width:360px;-webkit-box-sizing:border-box;box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article div.cover{position:relative}:host>article div.cover div.img-wrapper{display:-ms-flexbox;display:flex;overflow:hidden;border:var(--border-size-small) solid var(--color-surface03);line-height:0}:host>article div.cover div.img-wrapper img{width:auto;max-width:100%;height:auto;max-height:100%;-ms-flex-item-align:end;align-self:flex-end}:host>article div.cover .ribbon{position:absolute;z-index:10;top:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * -2);display:-ms-flexbox;display:flex;max-width:100%;height:calc(var(--space-unit) * 4);-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--color-text-inverse);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host>article div.cover .ribbon.interactive:hover{cursor:pointer}:host>article div.cover .ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.cover .ribbon::before{position:absolute;bottom:-12px;left:-2px;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:16px solid transparent;content:\"\"}:host>article div.cover .ribbon z-icon{margin-right:var(--space-unit)}:host>article div.content{margin:var(--space-unit) 0;border-radius:var(--border-radius)}:host>article .title{display:-ms-flexbox;display:flex;height:100%;-ms-flex-item-align:center;align-self:center;color:var(--color-default-text);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host>article .title *{all:unset}:host>article div.subtitle{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host>article div.authors{color:var(--color-default-text);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host>article div.isbn{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.isbn>.code{font-weight:var(--font-sb)}:host>article div.tags{display:-ms-flexbox;display:flex;overflow:hidden;max-height:32px;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host>article ::slotted([slot=\"tags\"]){margin-bottom:var(--space-unit)}:host>article ::slotted([slot=\"header-cta\"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-primary01-icon)}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:top;align-items:top;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover div.img-wrapper{border-radius:var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded button.show-resources{--z-icon-height:16px;--z-icon-width:16px;all:unset;display:-ms-flexbox;display:flex;width:100%;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--space-unit) * 1) 0;color:var(--color-link-primary);cursor:pointer;fill:var(--color-link-primary);font-size:var(--font-size-2);font-weight:var(--font-sb);gap:var(--space-unit)}:host>article.expanded button.show-resources:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host>article.search{width:262px;height:616px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2)}:host>article.search div.header{display:-ms-flexbox;display:flex;height:24px;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover div.img-wrapper{height:314px;border-radius:var(--border-radius)}:host>article.search .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset;font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>article.compact{width:var(--z-book-card-compact-width);height:var(--z-book-card-compact-height)}:host>article.compact.borderless{border:none}:host>article.compact div.cover div.img-wrapper{width:100%;height:calc(var(--z-book-card-compact-width) * 1.36);-webkit-box-sizing:border-box;box-sizing:border-box;border:none;background:var(--color-white);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2)}:host>article.compact div.wrapper{display:-ms-flexbox;display:flex;height:100%;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start}:host>article.compact div.content{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;padding:calc(var(--space-unit) * 2);padding-top:var(--space-unit);margin:0}:host>article.compact div.action-container{padding:calc(var(--space-unit) * 2);padding-top:0;margin-top:auto}:host>article.compact.borderless div.cover div.img-wrapper{width:var(--z-book-card-compact-width)}:host>article.compact.borderless div.content{padding:0;padding-top:var(--space-unit)}:host>article.compact.borderless div.action-container{padding:0;padding-bottom:calc(var(--space-unit) * 2)}:host>article.compact .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset}:host>article.compact .title,:host>article.compact .subtitle,:host>article.compact .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}@media (min-width: 768px){:host>article{width:100%;max-width:initial}:host>article .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0;border:0}:host>article.expanded div.wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start}:host>article.expanded div.cover div.img-wrapper{width:262px;height:356px;border:0;border:var(--border-size-medium) solid var(--color-surface03);border-right:none;background:var(--color-surface01);border-radius:var(--border-radius) 0 0 var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:auto;border-radius:0}:host>article.expanded div.content{display:-ms-flexbox;display:flex;overflow:hidden;width:100%;height:356px;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;border:var(--border-size-medium) solid var(--color-surface03);border-left:none;margin:0;background:var(--color-surface01);border-radius:0 var(--border-radius) var(--border-radius) 0}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host>article{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:initial}}@media (min-width: 1366px){:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}";
+const stylesCss = ":host{--z-book-card-ribbon-background-color:var(--avatar-C08);--z-book-card-ribbon-shadow-color:var(--green950);--z-book-card-compact-width:262px;--z-book-card-compact-height:568px}:host>article{display:block;width:100%;max-width:360px;-webkit-box-sizing:border-box;box-sizing:border-box;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>article div.cover{position:relative}:host>article div.cover div.img-wrapper{display:-ms-flexbox;display:flex;overflow:hidden;border:var(--border-size-small) solid var(--color-surface03);line-height:0}:host>article div.cover div.img-wrapper img{width:auto;max-width:100%;height:auto;max-height:100%;-ms-flex-item-align:end;align-self:flex-end}:host>article div.cover .ribbon{position:absolute;z-index:10;top:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * -2);display:-ms-flexbox;display:flex;max-width:100%;height:calc(var(--space-unit) * 4);-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;padding:0 calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--color-surface01);background:var(--z-book-card-ribbon-background-color);border-radius:0 var(--border-radius) var(--border-radius) 0;-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);color:var(--color-text-inverse);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-weight:var(--font-sb);line-height:initial}:host>article div.cover .ribbon.interactive:hover{cursor:pointer}:host>article div.cover .ribbon.interactive:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}:host>article div.cover .ribbon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.cover .ribbon::before{position:absolute;bottom:-12px;left:-2px;width:0;height:0;border-top:10px solid var(--z-book-card-ribbon-shadow-color);border-left:16px solid transparent;content:\"\"}:host>article div.cover .ribbon z-icon{margin-right:var(--space-unit)}:host>article div.content{margin:var(--space-unit) 0;border-radius:var(--border-radius)}:host>article .title{display:-ms-flexbox;display:flex;height:100%;-ms-flex-item-align:center;align-self:center;color:var(--color-default-text);font-size:var(--font-size-4);font-weight:var(--font-sb);line-height:1.5}:host>article .title *{all:unset}:host>article div.subtitle{color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4}:host>article div.authors{color:var(--color-default-text);font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.33}:host>article div.isbn{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);line-height:1.33;text-overflow:ellipsis;white-space:nowrap;word-wrap:nowrap}:host>article div.isbn>.code{font-weight:var(--font-sb)}:host>article div.tags{display:-ms-flexbox;display:flex;overflow:hidden;max-height:32px;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;gap:calc(var(--space-unit) / 2)}:host>article ::slotted([slot=\"tags\"]){margin-bottom:var(--space-unit)}:host>article ::slotted([slot=\"header-cta\"]){--z-icon-width:20px;--z-icon-height:20px;padding:var(--space-unit);cursor:pointer;fill:var(--color-primary01-icon)}:host>article ::slotted([slot=\"header-cta\"]:focus){-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none !important}:host>article.expanded{width:100%;min-width:328px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.header{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:top;align-items:top;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--space-unit);white-space:nowrap}:host>article.expanded div.cover div.img-wrapper{border-radius:var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:100%}:host>article.expanded .title,:host>article.expanded .subtitle,:host>article.expanded .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}:host>article.expanded div.footer{border-top:var(--border-size-small) solid var(--color-surface03);margin-bottom:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open{padding-top:calc(var(--space-unit) * 1.5)}:host>article.expanded div.footer.open div.resources{display:initial}:host>article.expanded div.footer.close div.resources{display:none}:host>article.expanded button.show-resources{--z-icon-height:16px;--z-icon-width:16px;all:unset;display:-ms-flexbox;display:flex;width:100%;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--space-unit) * 1) 0;color:var(--color-link-primary);cursor:pointer;fill:var(--color-link-primary);font-size:var(--font-size-2);font-weight:var(--font-sb);gap:var(--space-unit)}:host>article.expanded button.show-resources:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary)}:host>article.search{width:262px;height:616px;padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.search .wrapper-container{display:-ms-flexbox;display:flex;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}:host>article.search .wrapper-container .wrapper{height:451px}:host>article.search .wrapper-container .action-container{padding-bottom:calc(var(--space-unit) * 2)}:host>article.search div.header{display:-ms-flexbox;display:flex;height:24px;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:calc(var(--space-unit) * 1.5);white-space:nowrap}:host>article.search div.cover div.img-wrapper{height:314px;border-radius:var(--border-radius)}:host>article.search .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset;font-size:var(--font-size-3)}:host>article.search .title,:host>article.search .subtitle,:host>article.search .authors{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host>article.compact{width:var(--z-book-card-compact-width);height:var(--z-book-card-compact-height)}:host>article.compact.borderless{border:none}:host>article.compact div.cover div.img-wrapper{width:100%;height:calc(var(--z-book-card-compact-width) * 1.36);-webkit-box-sizing:border-box;box-sizing:border-box;border:none;background:var(--color-white);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2)}:host>article.compact div.wrapper{display:-ms-flexbox;display:flex;height:100%;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start}:host>article.compact div.content{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;padding:calc(var(--space-unit) * 2);padding-top:var(--space-unit);margin:0}:host>article.compact div.action-container{padding:calc(var(--space-unit) * 2);padding-top:0;margin-top:auto}:host>article.compact.borderless div.cover div.img-wrapper{width:var(--z-book-card-compact-width)}:host>article.compact.borderless div.content{padding:0;padding-top:var(--space-unit)}:host>article.compact.borderless div.action-container{padding:0;padding-bottom:calc(var(--space-unit) * 2)}:host>article.compact .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset}:host>article.compact .title,:host>article.compact .subtitle,:host>article.compact .authors{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:initial}@media (min-width: 768px){:host>article{width:100%;max-width:initial}:host>article .title{display:block;height:initial;-ms-flex-item-align:unset;align-self:unset}:host>article.expanded{width:100%;min-width:initial;max-width:initial;height:360px;padding:0;border:0}:host>article.expanded div.wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start}:host>article.expanded div.cover div.img-wrapper{width:262px;height:356px;border:0;border:var(--border-size-medium) solid var(--color-surface03);border-right:none;background:var(--color-surface01);border-radius:var(--border-radius) 0 0 var(--border-radius)}:host>article.expanded div.cover div.img-wrapper img{width:auto;border-radius:0}:host>article.expanded div.content{display:-ms-flexbox;display:flex;overflow:hidden;width:100%;height:356px;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;border:var(--border-size-medium) solid var(--color-surface03);border-left:none;margin:0;background:var(--color-surface01);border-radius:0 var(--border-radius) var(--border-radius) 0}:host>article.expanded div.content div.top{padding:calc(var(--space-unit) * 2);padding-bottom:0}:host>article.expanded div.content div.top div.info{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:calc(var(--space-unit) / 2)}:host>article.expanded div.content div.top div.info>div.left{width:100%}:host>article.expanded div.content div.bottom{padding:calc(var(--space-unit) * 2);padding-bottom:0}}@media (min-width: 1152px){:host>article{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:initial}}@media (min-width: 1366px){:host>article.expanded{width:635px}:host>article.expanded div.content{width:369px}}";
 const ZBookCardStyle0 = stylesCss;
 const ZBookCard$1 = /*@__PURE__*/ proxyCustomElement(class ZBookCard extends HTMLElement {

package/dist/components/z-book-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-book-card.js","mappings":"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","names":["ZBookCard"],"sources":["src/components/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/components/z-book-card/index.tsx"],"sourcesContent":["/* COMMON STYLES /\n\n:host {\n --z-book-card-ribbon-background-color: var(--avatar-C08);\n --z-book-card-ribbon-shadow-color: var(--green950);\n --z-book-card-compact-width: 262px;\n --z-book-card-compact-height: 568px;\n}\n\n:host > article {\n display: block;\n width: 100%;\n max-width: 360px;\n box-sizing: border-box;\n border: var(--border-size-medium) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > article div.cover {\n position: relative;\n}\n\n:host > article div.cover div.img-wrapper {\n display: flex;\n overflow: hidden;\n border: var(--border-size-small) solid var(--color-surface03);\n line-height: 0;\n}\n\n:host > article div.cover div.img-wrapper img {\n width: auto;\n max-width: 100%;\n height: auto;\n max-height: 100%;\n align-self: flex-end;\n}\n\n:host > article div.cover .ribbon {\n position: absolute;\n z-index: 10;\n top: calc(var(--space-unit) 2);\n left: calc(var(--space-unit) * -2);\n display: flex;\n max-width: 100%;\n height: calc(var(--space-unit) * 4);\n box-sizing: border-box;\n align-items: center;\n padding: 0 calc(var(--space-unit) * 2);\n border: var(--border-size-medium) solid var(--color-surface01);\n background: var(--z-book-card-ribbon-background-color);\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n box-shadow: var(--shadow-2);\n color: var(--color-text-inverse);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-2);\n font-weight: var(--font-sb);\n line-height: initial;\n}\n\n:host > article div.cover .ribbon.interactive:hover {\n cursor: pointer;\n}\n\n:host > article div.cover .ribbon span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: nowrap;\n}\n\n:host > article div.cover .ribbon::before {\n position: absolute;\n bottom: -12px;\n left: -2px;\n width: 0;\n height: 0;\n border-top: 10px solid var(--z-book-card-ribbon-shadow-color);\n border-left: 16px solid transparent;\n content: \"\";\n}\n\n:host > article div.cover .ribbon z-icon {\n margin-right: var(--space-unit);\n}\n\n:host > article div.content {\n margin: var(--space-unit) 0;\n border-radius: var(--border-radius);\n}\n\n:host > article .title {\n display: flex;\n height: 100%;\n align-self: center;\n color: var(--color-default-text);\n font-size: var(--font-size-4);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n:host > article .title * {\n all: unset;\n}\n\n:host > article div.subtitle {\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n:host > article div.authors {\n color: var(--color-default-text);\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n line-height: 1.33;\n}\n\n:host > article div.isbn {\n overflow: hidden;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n line-height: 1.33;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: nowrap;\n}\n\n:host > article div.isbn > .code {\n font-weight: var(--font-sb);\n}\n\n:host > article div.tags {\n display: flex;\n overflow: hidden;\n max-height: 32px;\n flex-flow: row wrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: flex-start;\n gap: calc(var(--space-unit) / 2);\n}\n\n:host > article ::slotted([slot=\"tags\"]) {\n margin-bottom: var(--space-unit);\n}\n\n:host > article ::slotted([slot=\"header-cta\"]) {\n --z-icon-width: 20px;\n --z-icon-height: 20px;\n\n padding: var(--space-unit);\n cursor: pointer;\n fill: var(--color-primary01-icon);\n}\n\n/* EXPANDED STYLES /\n\n:host > article.expanded {\n width: 100%;\n min-width: 328px;\n padding: calc(var(--space-unit) 2);\n padding-bottom: 0;\n}\n\n:host > article.expanded div.header {\n display: flex;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: top;\n justify-content: space-between;\n margin-bottom: var(--space-unit);\n white-space: nowrap;\n}\n\n:host > article.expanded div.cover div.img-wrapper {\n border-radius: var(--border-radius);\n}\n\n:host > article.expanded div.cover div.img-wrapper img {\n width: 100%;\n}\n\n:host > article.expanded .title,\n:host > article.expanded .subtitle,\n:host > article.expanded .authors {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: initial;\n}\n\n:host > article.expanded div.footer {\n border-top: var(--border-size-small) solid var(--color-surface03);\n margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open {\n padding-top: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open div.resources {\n display: initial;\n}\n\n:host > article.expanded div.footer.close div.resources {\n display: none;\n}\n\n:host > article.expanded button.show-resources {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n\n all: unset;\n display: flex;\n width: 100%;\n flex-flow: row nowrap;\n align-content: center;\n align-items: center;\n justify-content: center;\n padding: calc(var(--space-unit) * 1) 0;\n color: var(--color-link-primary);\n cursor: pointer;\n fill: var(--color-link-primary);\n font-size: var(--font-size-2);\n font-weight: var(--font-sb);\n gap: var(--space-unit);\n}\n\n:host > article.expanded button.show-resources:focus {\n box-shadow: var(--shadow-focus-primary);\n}\n\n/* SEARCH STYLES /\n\n:host > article.search {\n width: 262px;\n height: 616px;\n padding: calc(var(--space-unit) 2);\n padding-bottom: 0;\n}\n\n:host > article.search .wrapper-container {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n}\n\n:host > article.search .wrapper-container .wrapper {\n height: 451px;\n}\n\n:host > article.search .wrapper-container .action-container {\n padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.search div.header {\n display: flex;\n height: 24px;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: center;\n justify-content: space-between;\n margin-bottom: calc(var(--space-unit) * 1.5);\n white-space: nowrap;\n}\n\n:host > article.search div.cover div.img-wrapper {\n height: 314px;\n border-radius: var(--border-radius);\n}\n\n:host > article.search .title {\n display: block;\n height: initial;\n align-self: unset;\n font-size: var(--font-size-3);\n}\n\n:host > article.search .title,\n:host > article.search .subtitle,\n:host > article.search .authors {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* COMPACT STYLES /\n\n:host > article.compact {\n width: var(--z-book-card-compact-width);\n height: var(--z-book-card-compact-height);\n}\n\n:host > article.compact.borderless {\n border: none;\n}\n\n:host > article.compact div.cover div.img-wrapper {\n width: 100%;\n height: calc(var(--z-book-card-compact-width) 1.36);\n box-sizing: border-box;\n border: none;\n background: var(--color-white);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n box-shadow: var(--shadow-2);\n}\n\n:host > article.compact div.wrapper {\n display: flex;\n height: 100%;\n flex-flow: column nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: flex-start;\n}\n\n:host > article.compact div.content {\n display: flex;\n box-sizing: border-box;\n flex-flow: column nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: space-between;\n padding: calc(var(--space-unit) * 2);\n padding-top: var(--space-unit);\n margin: 0;\n}\n\n:host > article.compact div.action-container {\n padding: calc(var(--space-unit) * 2);\n padding-top: 0;\n margin-top: auto;\n}\n\n:host > article.compact.borderless div.cover div.img-wrapper {\n width: var(--z-book-card-compact-width);\n}\n\n:host > article.compact.borderless div.content {\n padding: 0;\n padding-top: var(--space-unit);\n}\n\n:host > article.compact.borderless div.action-container {\n padding: 0;\n padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.compact .title {\n display: block;\n height: initial;\n align-self: unset;\n}\n\n:host > article.compact .title,\n:host > article.compact .subtitle,\n:host > article.compact .authors {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: initial;\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n :host > article {\n width: 100%;\n max-width: initial;\n }\n\n :host > article .title {\n display: block;\n height: initial;\n align-self: unset;\n }\n\n / EXPANDED STYLES /\n\n :host > article.expanded {\n width: 100%;\n min-width: initial;\n max-width: initial;\n height: 360px;\n padding: 0;\n border: 0;\n }\n\n :host > article.expanded div.wrapper {\n display: flex;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: flex-start;\n }\n\n :host > article.expanded div.cover div.img-wrapper {\n width: 262px;\n height: 356px;\n border: 0;\n border: var(--border-size-medium) solid var(--color-surface03);\n border-right: none;\n background: var(--color-surface01);\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n }\n\n :host > article.expanded div.cover div.img-wrapper img {\n width: auto;\n border-radius: 0;\n }\n\n :host > article.expanded div.content {\n display: flex;\n overflow: hidden;\n width: 100%;\n height: 356px;\n flex-flow: column nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: space-between;\n border: var(--border-size-medium) solid var(--color-surface03);\n border-left: none;\n margin: 0;\n background: var(--color-surface01);\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n }\n\n :host > article.expanded div.content div.top {\n padding: calc(var(--space-unit) 2);\n padding-bottom: 0;\n }\n\n :host > article.expanded div.content div.top div.info {\n display: flex;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: space-between;\n margin-bottom: calc(var(--space-unit) / 2);\n }\n\n :host > article.expanded div.content div.top div.info > div.left {\n width: 100%;\n }\n\n :host > article.expanded div.content div.bottom {\n padding: calc(var(--space-unit) * 2);\n padding-bottom: 0;\n }\n}\n\n/* Desktop breakpoint /\n\n@media (min-width: 1152px) {\n :host > article {\n width: fit-content;\n max-width: initial;\n }\n}\n\n/ Wide breakpoint /\n@media (min-width: 1366px) {\n :host > article.expanded {\n width: 635px;\n }\n\n :host > article.expanded div.content {\n width: 369px;\n }\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {BookCardVariant} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\nimport {randomId} from \"../../utils/utils\";\n\n/\n @slot resources - books resources (extended variant only)\n * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)\n * @slot tags - card tags (extended and search variant only)\n * @slot footer-cta - footer cta button (search and compact variant only)\n * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color\n * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color\n * @cssprop --z-book-card-compact-width - compact card custom width\n * @cssprop --z-book-card-compact-height - compact card custom height\n /\n@Component({\n tag: \"z-book-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZBookCard {\n @Element() hostElement: HTMLZBookCardElement;\n\n /\n Card variant: expanded, compact, search\n /\n @Prop()\n variant: BookCardVariant;\n\n /\n Cover URL\n /\n @Prop()\n cover: string;\n\n /\n Card main title\n /\n @Prop()\n operaTitle: string;\n\n /\n [optional] Card subtitle\n /\n @Prop()\n volumeTitle?: string;\n\n /\n [optional] Authors\n /\n @Prop()\n authors?: string;\n\n /\n [optional] Main ISBN\n /\n @Prop()\n isbn?: string;\n\n /\n [optional] ISBN label\n /\n @Prop()\n isbnLabel = \"\";\n\n /\n [optional] Ribbon label - expanded and search variant only\n /\n @Prop()\n ribbon?: string;\n\n /\n [optional] Ribbon icon - expanded and search variant only\n /\n @Prop()\n ribbonIcon?: string;\n\n /\n [optional] Ribbon interactive - expanded and search variant only\n /\n @Prop()\n ribbonInteractive?: boolean;\n\n /\n [optional] Borderless card - compact variant only\n /\n @Prop()\n borderless?: boolean;\n\n /\n [optional] Fallback cover URL\n /\n @Prop()\n fallbackCover?: string;\n\n /\n [optional] [accessibility] Card title HTML tag\n /\n @Prop()\n operaTitleTag?: string;\n\n @State()\n isMobile = false;\n\n @State()\n hasResources = false;\n\n @State()\n showResources = false;\n\n /* click on interactive ribbon */\n @Event()\n ribbonClick: EventEmitter;\n\n private emitRibbonClick(): void {\n this.ribbonClick.emit();\n }\n\n private id: string;\n\n componentWillLoad(): void {\n this.id = `id-${randomId()}`;\n\n const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);\n }\n\n componentDidLoad(): void {\n this.handleResources();\n }\n\n private handleResources(): void {\n if (this.variant !== BookCardVariant.EXPANDED \|\| !this.isMobile) {\n return;\n }\n this.hasResources = this.hostElement.querySelectorAll(\"[slot=resources]\")?.length > 0;\n }\n\n private toggleResources(): void {\n this.showResources = !this.showResources;\n }\n\n private renderCard(): HTMLDivElement {\n switch (this.variant) {\n case BookCardVariant.EXPANDED:\n return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n case BookCardVariant.COMPACT:\n return this.renderCompactCard();\n case BookCardVariant.SEARCH:\n return this.renderSearchCard();\n }\n }\n\n private renderExpandedCard(): HTMLDivElement {\n return (\n <div class=\"wrapper\">\n {this.renderCover()}\n <div class=\"content\">\n <div class=\"top\">\n <div class=\"info\">\n <div class=\"left\">\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <div class=\"right\">{this.renderHeaderCtaSlot()}</div>\n </div>\n {this.renderTagsSlot()}\n </div>\n <div class=\"bottom\">{this.renderResourcesSlot()}</div>\n </div>\n </div>\n );\n }\n\n private renderMobileExpandedCard(): HTMLDivElement {\n return (\n <div class=\"wrapper\">\n <div class=\"header\">\n {this.renderOperaTitle()}\n {this.renderHeaderCtaSlot()}\n </div>\n {this.renderCover()}\n <div class=\"content\">\n {this.renderTagsSlot()}\n {this.renderAuthors()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n {this.hasResources && (\n <div\n class={{\n footer: true,\n open: this.showResources,\n close: !this.showResources,\n }}\n >\n {!this.showResources && this.renderShowResources()}\n {this.renderResourcesSlot()}\n {this.showResources && this.renderShowResources()}\n </div>\n )}\n </div>\n );\n }\n\n private renderSearchCard(): HTMLDivElement {\n return (\n <div class=\"wrapper-container\">\n <div class=\"wrapper\">\n <div class=\"header\">\n {this.renderOperaTitle()}\n {this.renderHeaderCtaSlot()}\n </div>\n {this.renderCover()}\n <div class=\"content\">\n {this.renderTagsSlot()}\n {this.renderAuthors()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n </div>\n {this.renderFooterCtaSlot()}\n </div>\n );\n }\n\n private renderCompactCard(): HTMLDivElement {\n return (\n <div class=\"wrapper\">\n {this.renderCover()}\n <div class=\"content\">\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n {this.renderFooterCtaSlot()}\n </div>\n );\n }\n\n private renderCover(): HTMLDivElement {\n return (\n <div class=\"cover\">\n {this.ribbon && this.variant !== BookCardVariant.COMPACT && this.renderRibbon()}\n <div class=\"img-wrapper\">\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 </div>\n </div>\n );\n }\n\n private renderRibbon(): HTMLElement {\n const content = [\n this.ribbonIcon && (\n <z-icon\n name={this.ribbonIcon}\n width={16}\n height={16}\n fill={\"color-inverse-icon\"}\n />\n ),\n <span>{this.ribbon}</span>,\n ];\n\n return this.ribbonInteractive ? (\n <button\n class=\"ribbon interactive\"\n onClick={() => this.emitRibbonClick()}\n >\n {content}\n </button>\n ) : (\n <div class=\"ribbon\">{content}</div>\n );\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.operaTitleTag\n ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`\n : this.operaTitle;\n\n return (\n <div\n class=\"title\"\n innerHTML={title}\n />\n );\n }\n\n private renderVolumeTitle(): null \| HTMLDivElement {\n return this.volumeTitle ? <div class=\"subtitle\">{this.volumeTitle}</div> : null;\n }\n\n private renderAuthors(): null \| HTMLDivElement {\n return this.authors ? (\n <div\n class=\"authors\"\n aria-description=\"Autori\"\n >\n {this.authors}\n </div>\n ) : null;\n }\n\n private renderIsbn(): null \| HTMLDivElement {\n return this.isbn ? (\n <div class=\"isbn\">\n <span\n class=\"code\"\n aria-description={`ISBN ${this.isbnLabel}`}\n >\n {this.isbn}\n </span>\n {this.isbnLabel ? <span class=\"label\"> {this.isbnLabel}</span> : null}\n </div>\n ) : null;\n }\n\n private renderShowResources(): HTMLButtonElement {\n return (\n <button\n class=\"show-resources\"\n aria-label={`Risorse del libro ${this.operaTitle}`}\n aria-expanded={this.showResources.toString()}\n aria-controls={`resources-${this.id}`}\n onClick={() => this.toggleResources()}\n >\n {this.showResources ? \"Chiudi\" : \"Vedi tutto\"}\n <z-icon name={this.showResources ? \"chevron-up\" : \"chevron-down\"} />\n </button>\n );\n }\n\n private renderTagsSlot(): HTMLDivElement {\n return (\n <div class=\"tags\">\n <slot name=\"tags\" />\n </div>\n );\n }\n\n private renderHeaderCtaSlot(): HTMLSlotElement {\n return <slot name=\"header-cta\" />;\n }\n\n private renderResourcesSlot(): HTMLDivElement {\n return (\n <div\n id={`resources-${this.id}`}\n class=\"resources\"\n >\n <slot\n name=\"resources\"\n onSlotchange={() => this.handleResources()}\n />\n </div>\n );\n }\n\n private renderFooterCtaSlot(): HTMLDivElement {\n return (\n <div class=\"action-container\">\n <slot name=\"footer-cta\" />\n </div>\n );\n }\n\n render(): HTMLZBookCardElement {\n return (\n <article\n class={{\n [this.variant]: true,\n borderless: !!this.borderless,\n }}\n >\n {this.renderCard()}\n </article>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-book-card.js","mappings":"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","names":["ZBookCard"],"sources":["src/components/z-book-card/styles.css?tag=z-book-card&encapsulation=shadow","src/components/z-book-card/index.tsx"],"sourcesContent":["/* COMMON STYLES /\n\n:host {\n --z-book-card-ribbon-background-color: var(--avatar-C08);\n --z-book-card-ribbon-shadow-color: var(--green950);\n --z-book-card-compact-width: 262px;\n --z-book-card-compact-height: 568px;\n}\n\n:host > article {\n display: block;\n width: 100%;\n max-width: 360px;\n box-sizing: border-box;\n border: var(--border-size-medium) solid var(--color-surface03);\n background-color: var(--color-surface01);\n border-radius: var(--border-radius);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > article div.cover {\n position: relative;\n}\n\n:host > article div.cover div.img-wrapper {\n display: flex;\n overflow: hidden;\n border: var(--border-size-small) solid var(--color-surface03);\n line-height: 0;\n}\n\n:host > article div.cover div.img-wrapper img {\n width: auto;\n max-width: 100%;\n height: auto;\n max-height: 100%;\n align-self: flex-end;\n}\n\n:host > article div.cover .ribbon {\n position: absolute;\n z-index: 10;\n top: calc(var(--space-unit) 2);\n left: calc(var(--space-unit) * -2);\n display: flex;\n max-width: 100%;\n height: calc(var(--space-unit) * 4);\n box-sizing: border-box;\n align-items: center;\n padding: 0 calc(var(--space-unit) * 2);\n border: var(--border-size-medium) solid var(--color-surface01);\n background: var(--z-book-card-ribbon-background-color);\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n box-shadow: var(--shadow-2);\n color: var(--color-text-inverse);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-2);\n font-weight: var(--font-sb);\n line-height: initial;\n}\n\n:host > article div.cover .ribbon.interactive:hover {\n cursor: pointer;\n}\n\n:host > article div.cover .ribbon.interactive:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n:host > article div.cover .ribbon span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: nowrap;\n}\n\n:host > article div.cover .ribbon::before {\n position: absolute;\n bottom: -12px;\n left: -2px;\n width: 0;\n height: 0;\n border-top: 10px solid var(--z-book-card-ribbon-shadow-color);\n border-left: 16px solid transparent;\n content: \"\";\n}\n\n:host > article div.cover .ribbon z-icon {\n margin-right: var(--space-unit);\n}\n\n:host > article div.content {\n margin: var(--space-unit) 0;\n border-radius: var(--border-radius);\n}\n\n:host > article .title {\n display: flex;\n height: 100%;\n align-self: center;\n color: var(--color-default-text);\n font-size: var(--font-size-4);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n:host > article .title * {\n all: unset;\n}\n\n:host > article div.subtitle {\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n:host > article div.authors {\n color: var(--color-default-text);\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n line-height: 1.33;\n}\n\n:host > article div.isbn {\n overflow: hidden;\n color: var(--color-default-text);\n font-size: var(--font-size-2);\n line-height: 1.33;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-wrap: nowrap;\n}\n\n:host > article div.isbn > .code {\n font-weight: var(--font-sb);\n}\n\n:host > article div.tags {\n display: flex;\n overflow: hidden;\n max-height: 32px;\n flex-flow: row wrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: flex-start;\n gap: calc(var(--space-unit) / 2);\n}\n\n:host > article ::slotted([slot=\"tags\"]) {\n margin-bottom: var(--space-unit);\n}\n\n:host > article ::slotted([slot=\"header-cta\"]) {\n --z-icon-width: 20px;\n --z-icon-height: 20px;\n\n padding: var(--space-unit);\n cursor: pointer;\n fill: var(--color-primary01-icon);\n}\n\n:host > article ::slotted([slot=\"header-cta\"]:focus) {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n/* EXPANDED STYLES /\n\n:host > article.expanded {\n width: 100%;\n min-width: 328px;\n padding: calc(var(--space-unit) 2);\n padding-bottom: 0;\n}\n\n:host > article.expanded div.header {\n display: flex;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: top;\n justify-content: space-between;\n margin-bottom: var(--space-unit);\n white-space: nowrap;\n}\n\n:host > article.expanded div.cover div.img-wrapper {\n border-radius: var(--border-radius);\n}\n\n:host > article.expanded div.cover div.img-wrapper img {\n width: 100%;\n}\n\n:host > article.expanded .title,\n:host > article.expanded .subtitle,\n:host > article.expanded .authors {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: initial;\n}\n\n:host > article.expanded div.footer {\n border-top: var(--border-size-small) solid var(--color-surface03);\n margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open {\n padding-top: calc(var(--space-unit) * 1.5);\n}\n\n:host > article.expanded div.footer.open div.resources {\n display: initial;\n}\n\n:host > article.expanded div.footer.close div.resources {\n display: none;\n}\n\n:host > article.expanded button.show-resources {\n --z-icon-height: 16px;\n --z-icon-width: 16px;\n\n all: unset;\n display: flex;\n width: 100%;\n flex-flow: row nowrap;\n align-content: center;\n align-items: center;\n justify-content: center;\n padding: calc(var(--space-unit) * 1) 0;\n color: var(--color-link-primary);\n cursor: pointer;\n fill: var(--color-link-primary);\n font-size: var(--font-size-2);\n font-weight: var(--font-sb);\n gap: var(--space-unit);\n}\n\n:host > article.expanded button.show-resources:focus {\n box-shadow: var(--shadow-focus-primary);\n}\n\n/* SEARCH STYLES /\n\n:host > article.search {\n width: 262px;\n height: 616px;\n padding: calc(var(--space-unit) 2);\n padding-bottom: 0;\n}\n\n:host > article.search .wrapper-container {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n}\n\n:host > article.search .wrapper-container .wrapper {\n height: 451px;\n}\n\n:host > article.search .wrapper-container .action-container {\n padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.search div.header {\n display: flex;\n height: 24px;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: center;\n justify-content: space-between;\n margin-bottom: calc(var(--space-unit) * 1.5);\n white-space: nowrap;\n}\n\n:host > article.search div.cover div.img-wrapper {\n height: 314px;\n border-radius: var(--border-radius);\n}\n\n:host > article.search .title {\n display: block;\n height: initial;\n align-self: unset;\n font-size: var(--font-size-3);\n}\n\n:host > article.search .title,\n:host > article.search .subtitle,\n:host > article.search .authors {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* COMPACT STYLES /\n\n:host > article.compact {\n width: var(--z-book-card-compact-width);\n height: var(--z-book-card-compact-height);\n}\n\n:host > article.compact.borderless {\n border: none;\n}\n\n:host > article.compact div.cover div.img-wrapper {\n width: 100%;\n height: calc(var(--z-book-card-compact-width) 1.36);\n box-sizing: border-box;\n border: none;\n background: var(--color-white);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n box-shadow: var(--shadow-2);\n}\n\n:host > article.compact div.wrapper {\n display: flex;\n height: 100%;\n flex-flow: column nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: flex-start;\n}\n\n:host > article.compact div.content {\n display: flex;\n box-sizing: border-box;\n flex-flow: column nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: space-between;\n padding: calc(var(--space-unit) * 2);\n padding-top: var(--space-unit);\n margin: 0;\n}\n\n:host > article.compact div.action-container {\n padding: calc(var(--space-unit) * 2);\n padding-top: 0;\n margin-top: auto;\n}\n\n:host > article.compact.borderless div.cover div.img-wrapper {\n width: var(--z-book-card-compact-width);\n}\n\n:host > article.compact.borderless div.content {\n padding: 0;\n padding-top: var(--space-unit);\n}\n\n:host > article.compact.borderless div.action-container {\n padding: 0;\n padding-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > article.compact .title {\n display: block;\n height: initial;\n align-self: unset;\n}\n\n:host > article.compact .title,\n:host > article.compact .subtitle,\n:host > article.compact .authors {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: initial;\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n :host > article {\n width: 100%;\n max-width: initial;\n }\n\n :host > article .title {\n display: block;\n height: initial;\n align-self: unset;\n }\n\n / EXPANDED STYLES /\n\n :host > article.expanded {\n width: 100%;\n min-width: initial;\n max-width: initial;\n height: 360px;\n padding: 0;\n border: 0;\n }\n\n :host > article.expanded div.wrapper {\n display: flex;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: flex-start;\n }\n\n :host > article.expanded div.cover div.img-wrapper {\n width: 262px;\n height: 356px;\n border: 0;\n border: var(--border-size-medium) solid var(--color-surface03);\n border-right: none;\n background: var(--color-surface01);\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n }\n\n :host > article.expanded div.cover div.img-wrapper img {\n width: auto;\n border-radius: 0;\n }\n\n :host > article.expanded div.content {\n display: flex;\n overflow: hidden;\n width: 100%;\n height: 356px;\n flex-flow: column nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: space-between;\n border: var(--border-size-medium) solid var(--color-surface03);\n border-left: none;\n margin: 0;\n background: var(--color-surface01);\n border-radius: 0 var(--border-radius) var(--border-radius) 0;\n }\n\n :host > article.expanded div.content div.top {\n padding: calc(var(--space-unit) 2);\n padding-bottom: 0;\n }\n\n :host > article.expanded div.content div.top div.info {\n display: flex;\n flex-flow: row nowrap;\n align-content: stretch;\n align-items: stretch;\n justify-content: space-between;\n margin-bottom: calc(var(--space-unit) / 2);\n }\n\n :host > article.expanded div.content div.top div.info > div.left {\n width: 100%;\n }\n\n :host > article.expanded div.content div.bottom {\n padding: calc(var(--space-unit) * 2);\n padding-bottom: 0;\n }\n}\n\n/* Desktop breakpoint /\n\n@media (min-width: 1152px) {\n :host > article {\n width: fit-content;\n max-width: initial;\n }\n}\n\n/ Wide breakpoint /\n@media (min-width: 1366px) {\n :host > article.expanded {\n width: 635px;\n }\n\n :host > article.expanded div.content {\n width: 369px;\n }\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {BookCardVariant} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\nimport {randomId} from \"../../utils/utils\";\n\n/\n @slot resources - books resources (extended variant only)\n * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)\n * @slot tags - card tags (extended and search variant only)\n * @slot footer-cta - footer cta button (search and compact variant only)\n * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color\n * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color\n * @cssprop --z-book-card-compact-width - compact card custom width\n * @cssprop --z-book-card-compact-height - compact card custom height\n /\n@Component({\n tag: \"z-book-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZBookCard {\n @Element() hostElement: HTMLZBookCardElement;\n\n /\n Card variant: expanded, compact, search\n /\n @Prop()\n variant: BookCardVariant;\n\n /\n Cover URL\n /\n @Prop()\n cover: string;\n\n /\n Card main title\n /\n @Prop()\n operaTitle: string;\n\n /\n [optional] Card subtitle\n /\n @Prop()\n volumeTitle?: string;\n\n /\n [optional] Authors\n /\n @Prop()\n authors?: string;\n\n /\n [optional] Main ISBN\n /\n @Prop()\n isbn?: string;\n\n /\n [optional] ISBN label\n /\n @Prop()\n isbnLabel = \"\";\n\n /\n [optional] Ribbon label - expanded and search variant only\n /\n @Prop()\n ribbon?: string;\n\n /\n [optional] Ribbon icon - expanded and search variant only\n /\n @Prop()\n ribbonIcon?: string;\n\n /\n [optional] Ribbon interactive - expanded and search variant only\n /\n @Prop()\n ribbonInteractive?: boolean;\n\n /\n [optional] Borderless card - compact variant only\n /\n @Prop()\n borderless?: boolean;\n\n /\n [optional] Fallback cover URL\n /\n @Prop()\n fallbackCover?: string;\n\n /\n [optional] [accessibility] Card title HTML tag\n /\n @Prop()\n operaTitleTag?: string;\n\n @State()\n isMobile = false;\n\n @State()\n hasResources = false;\n\n @State()\n showResources = false;\n\n /* click on interactive ribbon */\n @Event()\n ribbonClick: EventEmitter;\n\n private emitRibbonClick(): void {\n this.ribbonClick.emit();\n }\n\n private id: string;\n\n componentWillLoad(): void {\n this.id = `id-${randomId()}`;\n\n const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);\n }\n\n componentDidLoad(): void {\n this.handleResources();\n }\n\n private handleResources(): void {\n if (this.variant !== BookCardVariant.EXPANDED \|\| !this.isMobile) {\n return;\n }\n this.hasResources = this.hostElement.querySelectorAll(\"[slot=resources]\")?.length > 0;\n }\n\n private toggleResources(): void {\n this.showResources = !this.showResources;\n }\n\n private renderCard(): HTMLDivElement {\n switch (this.variant) {\n case BookCardVariant.EXPANDED:\n return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n case BookCardVariant.COMPACT:\n return this.renderCompactCard();\n case BookCardVariant.SEARCH:\n return this.renderSearchCard();\n }\n }\n\n private renderExpandedCard(): HTMLDivElement {\n return (\n <div class=\"wrapper\">\n {this.renderCover()}\n <div class=\"content\">\n <div class=\"top\">\n <div class=\"info\">\n <div class=\"left\">\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n <div class=\"right\">{this.renderHeaderCtaSlot()}</div>\n </div>\n {this.renderTagsSlot()}\n </div>\n <div class=\"bottom\">{this.renderResourcesSlot()}</div>\n </div>\n </div>\n );\n }\n\n private renderMobileExpandedCard(): HTMLDivElement {\n return (\n <div class=\"wrapper\">\n <div class=\"header\">\n {this.renderOperaTitle()}\n {this.renderHeaderCtaSlot()}\n </div>\n {this.renderCover()}\n <div class=\"content\">\n {this.renderTagsSlot()}\n {this.renderAuthors()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n {this.hasResources && (\n <div\n class={{\n footer: true,\n open: this.showResources,\n close: !this.showResources,\n }}\n >\n {!this.showResources && this.renderShowResources()}\n {this.renderResourcesSlot()}\n {this.showResources && this.renderShowResources()}\n </div>\n )}\n </div>\n );\n }\n\n private renderSearchCard(): HTMLDivElement {\n return (\n <div class=\"wrapper-container\">\n <div class=\"wrapper\">\n <div class=\"header\">\n {this.renderOperaTitle()}\n {this.renderHeaderCtaSlot()}\n </div>\n {this.renderCover()}\n <div class=\"content\">\n {this.renderTagsSlot()}\n {this.renderAuthors()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n </div>\n {this.renderFooterCtaSlot()}\n </div>\n );\n }\n\n private renderCompactCard(): HTMLDivElement {\n return (\n <div class=\"wrapper\">\n {this.renderCover()}\n <div class=\"content\">\n {this.renderAuthors()}\n {this.renderOperaTitle()}\n {this.renderVolumeTitle()}\n {this.renderIsbn()}\n </div>\n {this.renderFooterCtaSlot()}\n </div>\n );\n }\n\n private renderCover(): HTMLDivElement {\n return (\n <div class=\"cover\">\n {this.ribbon && this.variant !== BookCardVariant.COMPACT && this.renderRibbon()}\n <div class=\"img-wrapper\">\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 </div>\n </div>\n );\n }\n\n private renderRibbon(): HTMLElement {\n const content = [\n this.ribbonIcon && (\n <z-icon\n name={this.ribbonIcon}\n width={16}\n height={16}\n fill={\"color-inverse-icon\"}\n />\n ),\n <span>{this.ribbon}</span>,\n ];\n\n return this.ribbonInteractive ? (\n <button\n class=\"ribbon interactive\"\n onClick={() => this.emitRibbonClick()}\n >\n {content}\n </button>\n ) : (\n <div class=\"ribbon\">{content}</div>\n );\n }\n\n private renderOperaTitle(): HTMLDivElement {\n const title = this.operaTitleTag\n ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`\n : this.operaTitle;\n\n return (\n <div\n class=\"title\"\n innerHTML={title}\n />\n );\n }\n\n private renderVolumeTitle(): null \| HTMLDivElement {\n return this.volumeTitle ? <div class=\"subtitle\">{this.volumeTitle}</div> : null;\n }\n\n private renderAuthors(): null \| HTMLDivElement {\n return this.authors ? (\n <div\n class=\"authors\"\n aria-description=\"Autori\"\n >\n {this.authors}\n </div>\n ) : null;\n }\n\n private renderIsbn(): null \| HTMLDivElement {\n return this.isbn ? (\n <div class=\"isbn\">\n <span\n class=\"code\"\n aria-description={`ISBN ${this.isbnLabel}`}\n >\n {this.isbn}\n </span>\n {this.isbnLabel ? <span class=\"label\"> {this.isbnLabel}</span> : null}\n </div>\n ) : null;\n }\n\n private renderShowResources(): HTMLButtonElement {\n return (\n <button\n class=\"show-resources\"\n aria-label={`Risorse del libro ${this.operaTitle}`}\n aria-expanded={this.showResources.toString()}\n aria-controls={`resources-${this.id}`}\n onClick={() => this.toggleResources()}\n >\n {this.showResources ? \"Chiudi\" : \"Vedi tutto\"}\n <z-icon name={this.showResources ? \"chevron-up\" : \"chevron-down\"} />\n </button>\n );\n }\n\n private renderTagsSlot(): HTMLDivElement {\n return (\n <div class=\"tags\">\n <slot name=\"tags\" />\n </div>\n );\n }\n\n private renderHeaderCtaSlot(): HTMLSlotElement {\n return <slot name=\"header-cta\" />;\n }\n\n private renderResourcesSlot(): HTMLDivElement {\n return (\n <div\n id={`resources-${this.id}`}\n class=\"resources\"\n >\n <slot\n name=\"resources\"\n onSlotchange={() => this.handleResources()}\n />\n </div>\n );\n }\n\n private renderFooterCtaSlot(): HTMLDivElement {\n return (\n <div class=\"action-container\">\n <slot name=\"footer-cta\" />\n </div>\n );\n }\n\n render(): HTMLZBookCardElement {\n return (\n <article\n class={{\n [this.variant]: true,\n borderless: !!this.borderless,\n }}\n >\n {this.renderCard()}\n </article>\n );\n }\n}\n"],"version":3}