npm - @zanichelli/albe-web-components - Versions diffs - 14.5.1 → 14.5.2-rc-anchor-navigation - Mend

@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

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 (1744) hide show

package/dist/web-components-library/p-27b0663c.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZBookCardStyle0","ZBookCard","emitRibbonClick","this","ribbonClick","emit","componentWillLoad","id","randomId","mobileMediaQuery","window","matchMedia","mobileBreakpoint","isMobile","matches","onchange","mql","componentDidLoad","handleResources","variant","BookCardVariant","EXPANDED","hasResources","_a","hostElement","querySelectorAll","length","toggleResources","showResources","renderCard","renderMobileExpandedCard","renderExpandedCard","COMPACT","renderCompactCard","SEARCH","renderSearchCard","h","class","renderCover","renderAuthors","renderOperaTitle","renderVolumeTitle","renderIsbn","renderHeaderCtaSlot","renderTagsSlot","renderResourcesSlot","footer","open","close","renderShowResources","renderFooterCtaSlot","ribbon","renderRibbon","src","cover","onError","fallbackCover","content","ribbonIcon","name","width","height","fill","ribbonInteractive","onClick","title","operaTitleTag","operaTitle","innerHTML","volumeTitle","authors","isbn","isbnLabel","toString","onSlotchange","render","key","borderless"],"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, Prop, State, h, Event, EventEmitter} 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"],"mappings":"qKAAA,MAAMA,EAAY,y9QAClB,MAAAC,EAAeD,E,MCmBFE,EAAS,M,6NA2CR,G,mLAuCD,M,kBAGI,M,mBAGC,K,CAMR,eAAAC,GACNC,KAAKC,YAAYC,M,CAKnB,iBAAAC,GACEH,KAAKI,GAAK,MAAMC,MAEhB,MAAMC,EAAmBC,OAAOC,WAAW,eAAeC,QAC1DT,KAAKU,SAAWJ,EAAiBK,QACjCL,EAAiBM,SAAYC,GAASb,KAAKU,SAAWG,EAAIF,O,CAG5D,gBAAAG,GACEd,KAAKe,iB,CAGC,eAAAA,G,MACN,GAAIf,KAAKgB,UAAYC,EAAgBC,WAAalB,KAAKU,SAAU,CAC/D,M,CAEFV,KAAKmB,eAAeC,EAAApB,KAAKqB,YAAYC,iBAAiB,uBAAmB,MAAAF,SAAA,SAAAA,EAAEG,QAAS,C,CAG9E,eAAAC,GACNxB,KAAKyB,eAAiBzB,KAAKyB,a,CAGrB,UAAAC,GACN,OAAQ1B,KAAKgB,SACX,KAAKC,EAAgBC,SACnB,OAAOlB,KAAKU,SAAWV,KAAK2B,2BAA6B3B,KAAK4B,qBAChE,KAAKX,EAAgBY,QACnB,OAAO7B,KAAK8B,oBACd,KAAKb,EAAgBc,OACnB,OAAO/B,KAAKgC,mB,CAIV,kBAAAJ,GACN,OACEK,EAAA,OAAKC,MAAM,WACRlC,KAAKmC,cACNF,EAAA,OAAKC,MAAM,WACTD,EAAA,OAAKC,MAAM,OACTD,EAAA,OAAKC,MAAM,QACTD,EAAA,OAAKC,MAAM,QACRlC,KAAKoC,gBACLpC,KAAKqC,mBACLrC,KAAKsC,oBACLtC,KAAKuC,cAERN,EAAA,OAAKC,MAAM,SAASlC,KAAKwC,wBAE1BxC,KAAKyC,kBAERR,EAAA,OAAKC,MAAM,UAAUlC,KAAK0C,wB,CAM1B,wBAAAf,GACN,OACEM,EAAA,OAAKC,MAAM,WACTD,EAAA,OAAKC,MAAM,UACRlC,KAAKqC,mBACLrC,KAAKwC,uBAEPxC,KAAKmC,cACNF,EAAA,OAAKC,MAAM,WACRlC,KAAKyC,iBACLzC,KAAKoC,gBACLpC,KAAKsC,oBACLtC,KAAKuC,cAEPvC,KAAKmB,cACJc,EAAA,OACEC,MAAO,CACLS,OAAQ,KACRC,KAAM5C,KAAKyB,cACXoB,OAAQ7C,KAAKyB,iBAGbzB,KAAKyB,eAAiBzB,KAAK8C,sBAC5B9C,KAAK0C,sBACL1C,KAAKyB,eAAiBzB,KAAK8C,uB,CAO9B,gBAAAd,GACN,OACEC,EAAA,OAAKC,MAAM,qBACTD,EAAA,OAAKC,MAAM,WACTD,EAAA,OAAKC,MAAM,UACRlC,KAAKqC,mBACLrC,KAAKwC,uBAEPxC,KAAKmC,cACNF,EAAA,OAAKC,MAAM,WACRlC,KAAKyC,iBACLzC,KAAKoC,gBACLpC,KAAKsC,oBACLtC,KAAKuC,eAGTvC,KAAK+C,sB,CAKJ,iBAAAjB,GACN,OACEG,EAAA,OAAKC,MAAM,WACRlC,KAAKmC,cACNF,EAAA,OAAKC,MAAM,WACRlC,KAAKoC,gBACLpC,KAAKqC,mBACLrC,KAAKsC,oBACLtC,KAAKuC,cAEPvC,KAAK+C,sB,CAKJ,WAAAZ,GACN,OACEF,EAAA,OAAKC,MAAM,SACRlC,KAAKgD,QAAUhD,KAAKgB,UAAYC,EAAgBY,SAAW7B,KAAKiD,eACjEhB,EAAA,OAAKC,MAAM,eACTD,EAAA,OACEiB,IAAKlD,KAAKmD,MACVC,QAAS,KACP,GAAIpD,KAAKqD,cAAe,CACtBrD,KAAKmD,MAAQnD,KAAKqD,a,GAErB,cACW,U,CAOd,YAAAJ,GACN,MAAMK,EAAU,CACdtD,KAAKuD,YACHtB,EAAA,UACEuB,KAAMxD,KAAKuD,WACXE,MAAO,GACPC,OAAQ,GACRC,KAAM,uBAGV1B,EAAA,YAAOjC,KAAKgD,SAGd,OAAOhD,KAAK4D,kBACV3B,EAAA,UACEC,MAAM,qBACN2B,QAAS,IAAM7D,KAAKD,mBAEnBuD,GAGHrB,EAAA,OAAKC,MAAM,UAAUoB,E,CAIjB,gBAAAjB,GACN,MAAMyB,EAAQ9D,KAAK+D,cACf,IAAI/D,KAAK+D,iBAAiB/D,KAAKgE,eAAehE,KAAK+D,iBACnD/D,KAAKgE,WAET,OACE/B,EAAA,OACEC,MAAM,QACN+B,UAAWH,G,CAKT,iBAAAxB,GACN,OAAOtC,KAAKkE,YAAcjC,EAAA,OAAKC,MAAM,YAAYlC,KAAKkE,aAAqB,I,CAGrE,aAAA9B,GACN,OAAOpC,KAAKmE,QACVlC,EAAA,OACEC,MAAM,UAAS,mBACE,UAEhBlC,KAAKmE,SAEN,I,CAGE,UAAA5B,GACN,OAAOvC,KAAKoE,KACVnC,EAAA,OAAKC,MAAM,QACTD,EAAA,QACEC,MAAM,OAAM,mBACM,QAAQlC,KAAKqE,aAE9BrE,KAAKoE,MAEPpE,KAAKqE,UAAYpC,EAAA,QAAMC,MAAM,SAAO,IAAGlC,KAAKqE,WAAoB,MAEjE,I,CAGE,mBAAAvB,GACN,OACEb,EAAA,UACEC,MAAM,iBAAgB,aACV,qBAAqBlC,KAAKgE,aAAY,gBACnChE,KAAKyB,cAAc6C,WAAU,gBAC7B,aAAatE,KAAKI,KACjCyD,QAAS,IAAM7D,KAAKwB,mBAEnBxB,KAAKyB,cAAgB,SAAW,aACjCQ,EAAA,UAAQuB,KAAMxD,KAAKyB,cAAgB,aAAe,iB,CAKhD,cAAAgB,GACN,OACER,EAAA,OAAKC,MAAM,QACTD,EAAA,QAAMuB,KAAK,S,CAKT,mBAAAhB,GACN,OAAOP,EAAA,QAAMuB,KAAK,c,CAGZ,mBAAAd,GACN,OACET,EAAA,OACE7B,GAAI,aAAaJ,KAAKI,KACtB8B,MAAM,aAEND,EAAA,QACEuB,KAAK,YACLe,aAAc,IAAMvE,KAAKe,oB,CAMzB,mBAAAgC,GACN,OACEd,EAAA,OAAKC,MAAM,oBACTD,EAAA,QAAMuB,KAAK,e,CAKjB,MAAAgB,GACE,OACEvC,EAAA,WAAAwC,IAAA,2CACEvC,MAAO,CACL,CAAClC,KAAKgB,SAAU,KAChB0D,aAAc1E,KAAK0E,aAGpB1E,KAAK0B,a"}

package/dist/web-components-library/p-2c05849f.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as a,h as c}from"./p-10bb4f4b.js";const o=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:grid;padding-top:calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--color-surface03);color:var(--color-surface05);fill:var(--color-surface05);font-size:14px;grid-template-columns:36px auto;grid-template-rows:auto auto}:host>div>z-icon{grid-column:1 / 2;grid-row:1 / 2}:host>div>div.content{margin-bottom:var(--space-unit);grid-column:2 / 3;grid-row:1 / 2}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start;margin-bottom:var(--space-unit);grid-column:1 / 3;grid-row:2 / 3}@media only screen and (min-width: 768px){:host>div>div.cta-wrapper{flex-direction:row;grid-column:2 / 3}}";const e=o;const r=class{constructor(c){a(this,c)}render(){return c("div",{key:"77c4ac87fc391b13dea88c69e71165692075170e"},c("z-icon",{key:"12387df9bfe2fb8fa3cc0e5cfc2f1515e8ddf322",name:"exclamation-circle"}),c("div",{key:"4ae85314b4c54d9de77f5cc2e789fcfa2516cfac",class:"content"},c("slot",{key:"7dcf450d21455d6796faa2cfb1222aab546a94d6"})),c("div",{key:"a51ae4748bb1c29223d35fb10633e51fc17506ec",class:"cta-wrapper"},c("slot",{key:"2641720771473f5ce8cd207731273f82810dc428",name:"cta"})))}};r.style=e;export{r as z_pocket_message};
2	- //# sourceMappingURL=p-2c05849f.entry.js.map

package/dist/web-components-library/p-2c05849f.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZPocketMessageStyle0","ZPocketMessage","render","h","key","name","class"],"sources":["src/snowflakes/myz/pocket/z-pocket-message/styles.css?tag=z-pocket-message&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-message/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n display: grid;\n padding-top: calc(var(--space-unit) * 1.5);\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n color: var(--color-surface05);\n fill: var(--color-surface05);\n font-size: 14px;\n grid-template-columns: 36px auto;\n grid-template-rows: auto auto;\n}\n\n:host > div > z-icon {\n grid-column: 1 / 2;\n grid-row: 1 / 2;\n}\n\n:host > div > div.content {\n margin-bottom: var(--space-unit);\n grid-column: 2 / 3;\n grid-row: 1 / 2;\n}\n\n:host > div > div.cta-wrapper {\n display: flex;\n flex-flow: column nowrap;\n align-items: center;\n justify-content: flex-start;\n margin-bottom: var(--space-unit);\n grid-column: 1 / 3;\n grid-row: 2 / 3;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n :host > div > div.cta-wrapper {\n flex-direction: row;\n grid-column: 2 / 3;\n }\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot - message body\n * @slot cta - message CTAs\n */\n@Component({\n tag: \"z-pocket-message\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPocketMessage {\n render(): HTMLDivElement {\n return (\n <div>\n <z-icon name=\"exclamation-circle\" />\n <div class=\"content\">\n <slot />\n </div>\n <div class=\"cta-wrapper\">\n <slot name=\"cta\" />\n </div>\n </div>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,mvBAClB,MAAAC,EAAeD,E,MCUFE,EAAc,M,yBACzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,4CACED,EAAA,UAAAC,IAAA,2CAAQC,KAAK,uBACbF,EAAA,OAAAC,IAAA,2CAAKE,MAAM,WACTH,EAAA,QAAAC,IAAA,8CAEFD,EAAA,OAAAC,IAAA,2CAAKE,MAAM,eACTH,EAAA,QAAAC,IAAA,2CAAMC,KAAK,S"}

package/dist/web-components-library/p-2c1cbcf2.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,h as o,g as s}from"./p-10bb4f4b.js";import{t as i}from"./p-025f494e.js";const e=':host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position="bottom-centre"]),:host([position="bottom-right"]),:host([position="bottom-left"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position="top-left"]),:host([position="top-right"]),:host([position="top-centre"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position="top-centre"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position="top-left"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position="top-right"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position="bottom-centre"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position="bottom-right"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position="bottom-left"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}';const n=e;const a=class{constructor(o){t(this,o);this.position=i.TOP_RIGHT;this.newestontop=true}watchPropNewestontop(t){this.hostElement.append(...this.notificationArray.reverse());if(t){this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler)}else{this.hostElement.shadowRoot.removeEventListener("slotchange",this.slotChangeHandler)}}componentWillLoad(){if(this.newestontop){this.handleNewestOnTop()}}handleNewestOnTop(){this.notificationArray=Array.from(this.hostElement.children);this.hostElement.append(...this.notificationArray.reverse());this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler.bind(this))}slotChangeHandler(){const t=Array.from(this.hostElement.children).filter((t=>!this.notificationArray.includes(t)));if(t){t.forEach((t=>{this.notificationArray.push(t);const o=t;t.remove();this.hostElement.prepend(o)}))}}render(){return o("slot",{key:"8cabaa4c789ff5519e3e42e952464f4c137cc157",name:"toasts"})}get hostElement(){return s(this)}static get watchers(){return{newestontop:["watchPropNewestontop"]}}};a.style=n;export{a as z_toast_notification_list};
2	- //# sourceMappingURL=p-2c1cbcf2.entry.js.map

package/dist/web-components-library/p-2c1cbcf2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZToastNotificationListStyle0","ZToastNotificationList","ToastNotificationPosition","TOP_RIGHT","watchPropNewestontop","newValue","this","hostElement","append","notificationArray","reverse","shadowRoot","addEventListener","slotChangeHandler","removeEventListener","componentWillLoad","newestontop","handleNewestOnTop","Array","from","children","bind","difference","filter","elem","includes","forEach","push","newElem","remove","prepend","render","h","key","name"],"sources":["src/components/list/z-toast-notification-list/styles.css?tag=z-toast-notification-list&encapsulation=shadow","src/components/list/z-toast-notification-list/index.tsx"],"sourcesContent":[":host {\n position: fixed;\n z-index: 10000;\n display: flex;\n flex-flow: column nowrap;\n margin-top: calc(var(--space-unit) * 2);\n margin-bottom: calc(var(--space-unit) * 2);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n::slotted(z-toast-notification) {\n width: 100vw;\n}\n\n::slotted(:not(:last-child)) {\n margin-bottom: calc(var(--space-unit) * 1);\n}\n\n:host([position=\"bottom-centre\"]),\n:host([position=\"bottom-right\"]),\n:host([position=\"bottom-left\"]) {\n bottom: 0;\n align-items: flex-end;\n justify-content: flex-end;\n}\n\n:host([position=\"top-left\"]),\n:host([position=\"top-right\"]),\n:host([position=\"top-centre\"]) {\n top: 0;\n align-items: flex-start;\n justify-content: flex-start;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n :host {\n margin: calc(var(--space-unit) * 3);\n }\n\n :host([position=\"top-centre\"]) {\n top: 0;\n left: 50%;\n align-items: center;\n justify-content: flex-start;\n transform: translateX(-50%);\n }\n\n :host([position=\"top-left\"]) {\n top: 0;\n left: 0;\n align-items: flex-start;\n justify-content: flex-start;\n }\n\n :host([position=\"top-right\"]) {\n top: 0;\n right: 0;\n align-items: flex-end;\n justify-content: flex-start;\n }\n\n :host([position=\"bottom-centre\"]) {\n bottom: 0;\n left: 50%;\n align-items: center;\n justify-content: flex-end;\n transform: translateX(-50%);\n }\n\n :host([position=\"bottom-right\"]) {\n right: 0;\n bottom: 0;\n align-items: flex-end;\n justify-content: flex-end;\n }\n\n :host([position=\"bottom-left\"]) {\n bottom: 0;\n left: 0;\n align-items: flex-start;\n justify-content: flex-end;\n }\n\n ::slotted(z-toast-notification) {\n width: 50vw;\n }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n :host {\n margin: calc(var(--space-unit) * 4);\n }\n\n ::slotted(z-toast-notification) {\n width: 33vw;\n }\n}\n","import {Component, Prop, h, Element, Watch} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../../beans\";\n\n@Component({\n tag: \"z-toast-notification-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZToastNotificationList {\n @Element() hostElement: HTMLZToastNotificationListElement;\n\n /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n @Prop({reflect: true})\n position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n /**Set the entry position of new notification in the list */\n @Prop()\n newestontop?: boolean = true;\n\n private notificationArray: Element[];\n\n @Watch(\"newestontop\")\n watchPropNewestontop(newValue: boolean): void {\n this.hostElement.append(...this.notificationArray.reverse());\n if (newValue) {\n this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n } else {\n this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n }\n }\n\n componentWillLoad(): void {\n if (this.newestontop) {\n this.handleNewestOnTop();\n }\n }\n\n private handleNewestOnTop(): void {\n this.notificationArray = Array.from(this.hostElement.children);\n this.hostElement.append(...this.notificationArray.reverse());\n this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n }\n\n private slotChangeHandler(): void {\n const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n if (difference) {\n difference.forEach((elem) => {\n this.notificationArray.push(elem);\n const newElem = elem;\n elem.remove();\n this.hostElement.prepend(newElem);\n });\n }\n }\n\n render(): HTMLSlotElement {\n return <slot name=\"toasts\"></slot>;\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,m+CAClB,MAAAC,EAAeD,E,MCOFE,EAAsB,M,uCAKKC,EAA0BC,U,iBAIxC,I,CAKxB,oBAAAC,CAAqBC,GACnBC,KAAKC,YAAYC,UAAUF,KAAKG,kBAAkBC,WAClD,GAAIL,EAAU,CACZC,KAAKC,YAAYI,WAAWC,iBAAiB,aAAcN,KAAKO,kB,KAC3D,CACLP,KAAKC,YAAYI,WAAWG,oBAAoB,aAAcR,KAAKO,kB,EAIvE,iBAAAE,GACE,GAAIT,KAAKU,YAAa,CACpBV,KAAKW,mB,EAID,iBAAAA,GACNX,KAAKG,kBAAoBS,MAAMC,KAAKb,KAAKC,YAAYa,UACrDd,KAAKC,YAAYC,UAAUF,KAAKG,kBAAkBC,WAClDJ,KAAKC,YAAYI,WAAWC,iBAAiB,aAAcN,KAAKO,kBAAkBQ,KAAKf,M,CAGjF,iBAAAO,GACN,MAAMS,EAAaJ,MAAMC,KAAKb,KAAKC,YAAYa,UAAUG,QAAQC,IAAUlB,KAAKG,kBAAkBgB,SAASD,KAC3G,GAAIF,EAAY,CACdA,EAAWI,SAASF,IAClBlB,KAAKG,kBAAkBkB,KAAKH,GAC5B,MAAMI,EAAUJ,EAChBA,EAAKK,SACLvB,KAAKC,YAAYuB,QAAQF,EAAQ,G,EAKvC,MAAAG,GACE,OAAOC,EAAA,QAAAC,IAAA,2CAAMC,KAAK,U"}

package/dist/web-components-library/p-2df79d5c.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,h as t,a as i}from"./p-10bb4f4b.js";const r=':host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:20px;--z-icon-height:20px}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:""}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:12px;line-height:16px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));color:var(--color-default-text);text-align:center}:host([href]:not([disabled],[pressed])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]),:host([pressed]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-active-primary);background:var(--color-active-primary);color:var(--color-text-inverse)}:host(:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-success-default);color:var(--color-success-default)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-success-default)}:host([checked]) .indicator z-icon>svg{width:24px;height:24px}@media (min-width: 768px){.stepper-item span{display:block}}@media (min-width: 1152px){:host{width:calc(var(--space-unit) * 10);--z-icon-width:24px;--z-icon-height:24px}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10);font-size:18px;line-height:28px}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}';const o=r;const a=class{constructor(t){e(this,t);this.index=undefined;this.href=undefined;this.pressed=undefined;this.checked=undefined;this.disabled=undefined}getAttributes(){const e=this.href&&!this.pressed&&!this.disabled?{onClick:()=>location.href=this.href}:undefined;const t=e?{role:"link"}:undefined;const i=this.pressed&&!this.disabled?{ariaCurrent:"step"}:undefined;const r=this.pressed\|\|this.href===""?{tabindex:-1}:undefined;return Object.assign(Object.assign(Object.assign(Object.assign({},e),t),i),r)}render(){return t(i,{key:"c5ca192ca8a2dbf5a7df76d24059e2f312e2d6de",role:"listitem"},t("button",Object.assign({key:"df91258ecfeef2cc2d42b7cdeb35fe4d74fa53d9",class:"stepper-item",disabled:this.disabled},this.getAttributes()),t("div",{key:"45a0b2b14d11094e753e89747c89ad6554b6f086",class:"indicator"},this.checked?t("z-icon",{name:"checkmark"}):this.index),t("span",{key:"fbb1e1340c9d200312814aac29bf76077b956ea8"},t("slot",{key:"79791a5e64454e4b543b49e97f9af3592a18c4cf"}))))}};a.style=o;export{a as z_stepper_item};
2	- //# sourceMappingURL=p-2df79d5c.entry.js.map

package/dist/web-components-library/p-2df79d5c.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZStepperItemStyle0","ZStepperItem","getAttributes","href","this","pressed","disabled","onClick","location","undefined","role","current","ariaCurrent","tabindex","Object","assign","render","h","Host","key","class","checked","name","index"],"sources":["src/components/indicators/z-stepper-item/styles.css?tag=z-stepper-item&encapsulation=shadow","src/components/indicators/z-stepper-item/index.tsx"],"sourcesContent":[":host {\n position: relative;\n width: calc(var(--space-unit) * 5);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --z-icon-width: 20px;\n --z-icon-height: 20px;\n}\n\n:host(:not(:last-child)) {\n flex: 1;\n}\n\n:host(:not(:last-child))::after {\n position: absolute;\n z-index: 1;\n top: calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);\n right: calc(var(--space-unit) * 2);\n left: calc(var(--space-unit) * 3);\n display: block;\n width: auto;\n border-bottom: var(--border-size-medium) solid var(--color-disabled03);\n margin: 0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);\n content: \"\";\n}\n\n.stepper-item {\n display: flex;\n width: calc(var(--space-unit) * 5);\n flex-direction: column;\n align-items: center;\n padding: 0;\n border: 0;\n appearance: none;\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: 12px;\n line-height: 16px;\n outline: 0;\n text-decoration: none;\n}\n\n.stepper-item span {\n display: none;\n width: calc(100% + calc(var(--space-unit) * 4));\n color: var(--color-default-text);\n text-align: center;\n}\n\n:host([href]:not([disabled], [pressed])) .stepper-item {\n cursor: pointer;\n}\n\n:host([disabled]) .stepper-item {\n pointer-events: none;\n}\n\n:host([pressed]),\n:host([pressed]) .stepper-item {\n pointer-events: none;\n}\n\n.indicator {\n display: flex;\n width: calc(var(--space-unit) * 4);\n height: calc(var(--space-unit) * 4);\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n border: var(--border-size-medium) solid var(--color-primary01);\n margin: calc(var(--space-unit) * 2);\n background: var(--color-surface01);\n border-radius: 50%;\n color: var(--color-primary01);\n content: counter(stepper);\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 1;\n}\n\n:host([pressed]:not([disabled])) .indicator {\n border-color: var(--color-active-primary);\n background: var(--color-active-primary);\n color: var(--color-text-inverse);\n}\n\n:host(:not([disabled]):focus-within) .indicator {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([href]:not([disabled], [pressed], [checked])) .indicator:hover {\n border-color: var(--color-hover-primary);\n color: var(--color-hover-primary);\n}\n\n:host([disabled]) .indicator {\n border-color: var(--color-disabled02);\n background: var(--color-disabled01);\n color: var(--color-disabled03);\n}\n\n:host([checked]:not([disabled])) .indicator {\n border-color: var(--color-success-default);\n color: var(--color-success-default);\n}\n\n:host([checked]:not([disabled])) .indicator z-icon {\n fill: var(--color-success-default);\n}\n\n:host([checked]) .indicator z-icon > svg {\n width: 24px;\n height: 24px;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n .stepper-item span {\n display: block;\n }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n :host {\n width: calc(var(--space-unit) * 10);\n\n --z-icon-width: 24px;\n --z-icon-height: 24px;\n }\n\n :host(:not(:last-child))::after {\n top: calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);\n left: calc(var(--space-unit) * 8);\n }\n\n .stepper-item {\n width: calc(var(--space-unit) * 10);\n font-size: 18px;\n line-height: 28px;\n }\n\n .indicator {\n width: calc(var(--space-unit) * 6);\n height: calc(var(--space-unit) * 6);\n font-size: 16px;\n }\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-stepper-item\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZStepperItem {\n /**\n * The number of the step item.\n */\n @Prop({attribute: \"index\"})\n index: number;\n\n /**\n * The href to navigate on click.\n */\n @Prop({attribute: \"href\"})\n href: string;\n\n /**\n * The pressed state of the item.\n */\n @Prop({attribute: \"pressed\"})\n pressed: boolean;\n\n /**\n * The checked state of the item.\n */\n @Prop({attribute: \"checked\"})\n checked: boolean;\n\n /**\n * The disabled state of the item.\n */\n @Prop({attribute: \"disabled\"})\n disabled: boolean;\n\n private getAttributes(): Record<string, unknown> {\n const href =\n this.href && !this.pressed && !this.disabled ? {onClick: () => (location.href = this.href)} : undefined;\n const role = href ? {role: \"link\"} : undefined;\n const current = this.pressed && !this.disabled ? {ariaCurrent: \"step\"} : undefined;\n const tabindex = this.pressed || this.href === \"\" ? {tabindex: -1} : undefined;\n\n return {\n ...href,\n ...role,\n ...current,\n ...tabindex,\n };\n }\n\n render(): HTMLAnchorElement | HTMLButtonElement {\n return (\n <Host role=\"listitem\">\n <button\n class=\"stepper-item\"\n disabled={this.disabled}\n {...this.getAttributes()}\n >\n <div class=\"indicator\">{this.checked ? <z-icon name=\"checkmark\" /> : this.index}</div>\n <span>\n <slot />\n </span>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,0vFAClB,MAAAC,EAAeD,E,MCMFE,EAAY,M,wIA+Bf,aAAAC,GACN,MAAMC,EACJC,KAAKD,OAASC,KAAKC,UAAYD,KAAKE,SAAW,CAACC,QAAS,IAAOC,SAASL,KAAOC,KAAKD,MAASM,UAChG,MAAMC,EAAOP,EAAO,CAACO,KAAM,QAAUD,UACrC,MAAME,EAAUP,KAAKC,UAAYD,KAAKE,SAAW,CAACM,YAAa,QAAUH,UACzE,MAAMI,EAAWT,KAAKC,SAAWD,KAAKD,OAAS,GAAK,CAACU,UAAW,GAAKJ,UAErE,OAAAK,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACKZ,GACAO,GACAC,GACAE,E,CAIP,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACT,KAAK,YACTO,EAAA,SAAAH,OAAAC,OAAA,CAAAI,IAAA,2CACEC,MAAM,eACNd,SAAUF,KAAKE,UACXF,KAAKF,iBAETe,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aAAahB,KAAKiB,QAAUJ,EAAA,UAAQK,KAAK,cAAiBlB,KAAKmB,OAC1EN,EAAA,QAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,+C"}

package/dist/web-components-library/p-2ebf9e17.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as n,a as s,g as o}from"./p-10bb4f4b.js";import{B as i,e as a}from"./p-025f494e.js";const c=':host{position:relative;display:flex;min-width:128px;box-sizing:border-box;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:"";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}';const r=c;const l=class{constructor(n){e(this,n);this.colspanChange=t(this,"colspanChange",6);this.colspan=undefined;this.sticky=false;this.showMenu=null;this.isMenuOpen=false}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}this.colspanChange.emit(this.colspan\|\|1)}onMenuButtonClick(e){e.stopPropagation();this.popoverEl.open=!this.popoverEl.open}componentWillLoad(){this.updateColspan()}render(){return n(s,{key:"4c8c986b18fffe96985174dddd6b4ef77ceaa1ce",role:"cell","menu-open":this.isMenuOpen},n("slot",{key:"a40bcbb99d5ffc1e962b420ffb89f13cbcb3875e"}),this.showMenu&&n("div",{class:"cell--menu-container prevent-expand"},n("z-button",{variant:i.TERTIARY,icon:"contextual-menu",size:a.X_SMALL,ref:e=>this.menuTrigger=e,onClick:this.onMenuButtonClick.bind(this)}),n("z-popover",{ref:e=>this.popoverEl=e,bindTo:this.menuTrigger,onOpenChange:e=>this.isMenuOpen=e.detail.open},n("slot",{name:"contextual-menu"}))))}get host(){return o(this)}static get watchers(){return{colspan:["updateColspan"]}}};l.style=r;export{l as Z};
2	- //# sourceMappingURL=p-2ebf9e17.js.map

package/dist/web-components-library/p-2ebf9e17.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZTdStyle0","ZTd","updateColspan","this","colspan","host","style","gridColumn","removeProperty","colspanChange","emit","onMenuButtonClick","ev","stopPropagation","popoverEl","open","componentWillLoad","render","h","Host","key","role","isMenuOpen","showMenu","class","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","onClick","bind","bindTo","onOpenChange","event","detail","name"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,2gCAClB,MAAAC,EAAeD,E,MCWFE,EAAG,M,yGAaL,M,cAQuB,K,gBAMnB,K,CAgBH,aAAAC,GACR,GAAIC,KAAKC,QAAS,CAChBD,KAAKE,KAAKC,MAAMC,WAAa,QAAQJ,KAAKC,S,KACrC,CACLD,KAAKE,KAAKC,MAAME,eAAe,c,CAGjCL,KAAKM,cAAcC,KAAKP,KAAKC,SAAW,E,CAGlC,iBAAAO,CAAkBC,GACxBA,EAAGC,kBACHV,KAAKW,UAAUC,MAAQZ,KAAKW,UAAUC,I,CAGxC,iBAAAC,GACEb,KAAKD,e,CAGP,MAAAe,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OAAM,YACAlB,KAAKmB,YAEhBJ,EAAA,QAAAE,IAAA,6CACCjB,KAAKoB,UACJL,EAAA,OAAKM,MAAM,uCACTN,EAAA,YACEO,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQ9B,KAAK+B,YAAcD,EACjCE,QAAShC,KAAKQ,kBAAkByB,KAAKjC,QAEvCe,EAAA,aACEc,IAAMC,GAAQ9B,KAAKW,UAAYmB,EAC/BI,OAAQlC,KAAK+B,YACbI,aAAeC,GAAWpC,KAAKmB,WAAaiB,EAAMC,OAAOzB,MAEzDG,EAAA,QAAMuB,KAAK,sB"}

package/dist/web-components-library/p-2f2f460a.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,h as o,a,g as e}from"./p-10bb4f4b.js";import{C as r}from"./p-025f494e.js";const i=':host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)},::slotted(){box-sizing:border-box}:host(:not([variant="overlay"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot="cover"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot="metadata"]),::slotted([slot="title"]),::slotted([slot="text"]){display:-webkit-inline-box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot="title"]:not(:last-child)),::slotted([slot="text"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot="title"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:""}::slotted([slot="metadata"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot="title"]){margin:0;color:inherit;font-size:inherit;font-weight:var(--font-sb);-webkit-line-clamp:2;text-decoration:none}::slotted([slot="text"]){margin:0;-webkit-line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot="action"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot="title"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant="text"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant="border"])>.content,:host([variant="shadow"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant="text"])>.content{padding:var(--z-card--text-padding)}:host([variant="border"]) .actions,:host([variant="shadow"]) .actions{margin-top:auto}:host([variant="border"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant="border"][clickable]:hover)>.content{background:var(--color-background)}:host([variant="border"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="border"][clickable]:active){border-color:transparent}:host([variant="shadow"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant="shadow"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant="shadow"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant="shadow"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant="overlay"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}';const s=i;const n=class{constructor(o){t(this,o);this.variant=undefined;this.coverIcon=undefined;this.showShadow=false;this.clickable=false;this.hasCoverImage=undefined}componentWillLoad(){this.hasCoverImage=this.host.querySelector('[slot="cover"]')!==null}renderColorCoverCard(){return[o("div",{class:"cover-container"},o("div",{class:"color-cover"},o("div",{class:"cover-content"},o("slot",{name:"metadata"}),o("slot",{name:"title"})))),o("div",{class:"content"},o("slot",{name:"text"}),o("div",{class:"actions"},o("slot",{name:"action"})))]}renderContentDiv(){return o("div",{class:"content"},o("slot",{name:"metadata"}),o("slot",{name:"title"}),o("slot",{name:"text"}),o("div",{class:"actions"},o("slot",{name:"action"})))}render(){if(this.variant===r.TEXT){return o(a,null,this.renderContentDiv())}if(this.variant===r.OVERLAY\|\|this.hasCoverImage){return o(a,null,o("div",{class:"cover-container"},this.hasCoverImage&&[o("slot",{name:"cover"}),this.variant!==r.OVERLAY&&this.coverIcon&&o("z-icon",{name:this.coverIcon})],!this.hasCoverImage&&o("div",{class:"color-cover"})),this.renderContentDiv())}return o(a,null,this.renderColorCoverCard())}get host(){return e(this)}};n.style=s;export{n as z_card};
2	- //# sourceMappingURL=p-2f2f460a.entry.js.map

package/dist/web-components-library/p-2f2f460a.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZCardStyle0","ZCard","componentWillLoad","this","hasCoverImage","host","querySelector","renderColorCoverCard","h","class","name","renderContentDiv","render","variant","CardVariant","TEXT","Host","OVERLAY","coverIcon"],"sources":["src/components/z-card/styles.css?tag=z-card&encapsulation=shadow","src/components/z-card/index.tsx"],"sourcesContent":["/* The width of the card must be set by its container,\nrespecting the grid indications of the design. */\n\n:host {\n /* Override this var to change the cover's aspect ratio */\n --aspect-ratio: 1.62;\n --z-card--border-color: var(--gray200);\n --z-card--color-cover-background: var(--color-surface01);\n --z-card--text-background: var(--color-surface01);\n --z-card--text-border-radius: none;\n --z-card--text-border: none;\n --z-card--text-padding: calc(var(--space-unit) * 2) var(--space-unit);\n\n position: relative;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n*,\n::slotted(*) {\n box-sizing: border-box;\n}\n\n:host(:not([variant=\"overlay\"])) .cover-container {\n position: relative;\n width: 100%;\n}\n\n/* Old good trick with percentage padding to keep the aspect ratio.\nUnfortunately the `aspect-ratio` property is still experimental */\n.cover-container {\n padding-bottom: calc(100% / var(--aspect-ratio));\n}\n\n::slotted([slot=\"cover\"]),\n.color-cover {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.cover-container > z-icon {\n --z-icon-width: calc(var(--space-unit) * 11);\n --z-icon-height: var(--z-icon-width);\n\n position: absolute;\n top: calc(50% - calc(var(--z-icon-height) / 2));\n left: calc(50% - calc(var(--z-icon-width) / 2));\n fill: var(--color-primary01);\n}\n\n.color-cover {\n background-color: var(--z-card--color-cover-background);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n padding-top: var(--space-unit);\n}\n\n.color-cover .cover-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: flex-end;\n padding: var(--space-unit);\n}\n\n/* Truncates overflowing text */\n::slotted([slot=\"metadata\"]),\n::slotted([slot=\"title\"]),\n::slotted([slot=\"text\"]) {\n display: -webkit-inline-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n\n::slotted([slot=\"title\"]:not(:last-child)),\n::slotted([slot=\"text\"]:not(:last-child)) {\n margin-bottom: var(--space-unit);\n}\n\n::slotted([slot=\"title\"])::before {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n content: \"\";\n}\n\n::slotted([slot=\"metadata\"]:not(:last-child)) {\n margin: 0 0 calc(var(--space-unit) * 0.25);\n -webkit-line-clamp: 1;\n text-transform: uppercase;\n}\n\n::slotted([slot=\"title\"]) {\n margin: 0;\n color: inherit;\n font-size: inherit;\n font-weight: var(--font-sb);\n -webkit-line-clamp: 2;\n text-decoration: none;\n}\n\n::slotted([slot=\"text\"]) {\n margin: 0;\n -webkit-line-clamp: 3;\n}\n\n.actions {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n::slotted([slot=\"action\"]:not(:last-child)) {\n margin-right: calc(var(--space-unit) * 2);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible) {\n box-shadow: none !important;\n outline: none !important;\n}\n\n:host([variant=\"text\"]) {\n border: var(--z-card--text-border);\n background-color: var(--z-card--text-background);\n border-radius: var(--z-card--text-border-radius);\n}\n\n:host([show-shadow]) > .content,\n:host([variant=\"border\"]) > .content,\n:host([variant=\"shadow\"]) > .content {\n height: 100%;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n}\n\n:host([variant=\"text\"]) > .content {\n padding: var(--z-card--text-padding);\n}\n\n:host([variant=\"border\"]) .actions,\n:host([variant=\"shadow\"]) .actions {\n margin-top: auto;\n}\n\n/* Border */\n:host([variant=\"border\"]) {\n border: var(--border-size-small) solid var(--z-card--border-color);\n}\n\n:host([variant=\"border\"][clickable]:hover) > .content {\n background: var(--color-background);\n}\n\n:host([variant=\"border\"][clickable]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"border\"][clickable]:active) {\n border-color: transparent;\n}\n\n/* Shadow */\n:host([variant=\"shadow\"]),\n:host([show-shadow]) {\n box-shadow: var(--shadow-2);\n}\n\n:host([variant=\"shadow\"][clickable]:hover),\n:host([clickable][show-shadow]:hover) {\n box-shadow: var(--shadow-4);\n}\n\n:host([variant=\"shadow\"][clickable]:focus:focus-visible),\n:host([clickable][show-shadow]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n:host([variant=\"shadow\"][clickable]:active),\n:host([clickable][show-shadow]:active) {\n box-shadow: none;\n}\n\n/* Overlay */\n:host([variant=\"overlay\"]) .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: flex-end;\n padding: var(--space-unit);\n background-image: linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));\n color: var(--color-text-inverse);\n fill: var(--color-text-inverse);\n}\n","import {Component, Prop, h, Element, State, Host} from \"@stencil/core\";\nimport {CardVariant} from \"../../beans\";\n\n/**\n * ZCard component.\n * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`\n * @cssprop --z-card--border-color - Default: `var(--gray200)`\n * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`\n * @cssprop --z-card--text-border-radius - Default: `none`\n * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`\n * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`\n * @slot cover - Image cover\n * @slot metadata - Metadata\n * @slot title - Title\n * @slot text - Text content\n * @slot action - Actions\n */\n@Component({\n tag: \"z-card\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCard {\n /**\n * Card variant.\n * Can be one of \"text\", \"border\", \"shadow\", \"overlay\".\n * Leave it undefined for the default card.\n */\n @Prop({reflect: true})\n variant: CardVariant;\n\n /** Name of the icon to place over the image cover */\n @Prop()\n coverIcon: string;\n\n /** Enable shadow. Default: false. */\n @Prop({reflect: true})\n showShadow = false;\n\n /** Enable 'clickable' style like hover and focus style. */\n @Prop({reflect: true})\n clickable = false;\n\n @Element() host: HTMLZCardElement;\n\n @State()\n hasCoverImage: boolean;\n\n componentWillLoad(): void {\n this.hasCoverImage = this.host.querySelector('[slot=\"cover\"]') !== null;\n }\n\n /**\n * Template for a card without image cover.\n * A colored background replaces the image and some data is moved over it.\n */\n private renderColorCoverCard(): HTMLDivElement[] {\n return [\n <div class=\"cover-container\">\n <div class=\"color-cover\">\n <div class=\"cover-content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n </div>\n </div>\n </div>,\n <div class=\"content\">\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>,\n ];\n }\n\n /**\n * Template for the content div.\n */\n private renderContentDiv(): HTMLDivElement {\n return (\n <div class=\"content\">\n <slot name=\"metadata\"></slot>\n <slot name=\"title\"></slot>\n <slot name=\"text\"></slot>\n <div class=\"actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZCardElement {\n if (this.variant === CardVariant.TEXT) {\n return <Host>{this.renderContentDiv()}</Host>;\n }\n\n if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {\n return (\n <Host>\n <div class=\"cover-container\">\n {this.hasCoverImage && [\n <slot name=\"cover\"></slot>,\n this.variant !== CardVariant.OVERLAY && this.coverIcon && <z-icon name={this.coverIcon}></z-icon>,\n ]}\n {!this.hasCoverImage && <div class=\"color-cover\"></div>}\n </div>\n {this.renderContentDiv()}\n </Host>\n );\n }\n\n return <Host>{this.renderColorCoverCard()}</Host>;\n }\n}\n"],"mappings":"wFAAA,MAAMA,EAAY,0yHAClB,MAAAC,EAAeD,E,MCsBFE,EAAK,M,yFAeH,M,eAID,M,6BAOZ,iBAAAC,GACEC,KAAKC,cAAgBD,KAAKE,KAAKC,cAAc,oBAAsB,I,CAO7D,oBAAAC,GACN,MAAO,CACLC,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,eACTD,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,aAIjBF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,a,CASX,gBAAAC,GACN,OACEH,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,aACXF,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,SACXF,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAME,KAAK,Y,CAMnB,MAAAE,GACE,GAAIT,KAAKU,UAAYC,EAAYC,KAAM,CACrC,OAAOP,EAACQ,EAAI,KAAEb,KAAKQ,mB,CAGrB,GAAIR,KAAKU,UAAYC,EAAYG,SAAWd,KAAKC,cAAe,CAC9D,OACEI,EAACQ,EAAI,KACHR,EAAA,OAAKC,MAAM,mBACRN,KAAKC,eAAiB,CACrBI,EAAA,QAAME,KAAK,UACXP,KAAKU,UAAYC,EAAYG,SAAWd,KAAKe,WAAaV,EAAA,UAAQE,KAAMP,KAAKe,cAE7Ef,KAAKC,eAAiBI,EAAA,OAAKC,MAAM,iBAEpCN,KAAKQ,mB,CAKZ,OAAOH,EAACQ,EAAI,KAAEb,KAAKI,uB"}

package/dist/web-components-library/p-3092c82f.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as n,a as i,g as o}from"./p-10bb4f4b.js";const a=':host,::slotted(),{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-default-text)}::slotted(a){text-decoration:none}::slotted(){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(),.menu-label:focus-within .menu-label-content ::slotted(){letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(:not([slot]):focus:focus-visible){box-shadow:none !important}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:"";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-secondary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot="header"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot="header"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot="item"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}';const s=a;const l=class{toggle(){if(!this.hasContent){return}this.open=!this.open;this.open?this.opened.emit():this.closed.emit()}handleClick(t){if(!this.floating\|\|!this.open\|\|this.hostElement.contains(t.target)){return}this.reflow();this.open=false;this.closed.emit()}onOpenChanged(){if(this.open){this.reflow(true)}else{cancelAnimationFrame(this.raf)}}constructor(n){t(this,n);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.floating=false;this.open=false;this.verticalContext=false;this.hasHeader=undefined;this.hasContent=undefined;this.toggle=this.toggle.bind(this);this.checkContent=this.checkContent.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onItemsChange=this.onItemsChange.bind(this)}componentWillLoad(){this.checkContent()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null\|\|e===void 0?void 0:e.textContent}reflow(t=false){if(this.content){const{style:t}=this.content;const{left:e}=this.hostElement.getBoundingClientRect();const n=getComputedStyle(this.content).width;const i=n?parseFloat(n.replace("px","")):375;const o=30;t.left=`${Math.min(window.innerWidth-e-i-o,0)}px`}if(t){this.raf=requestAnimationFrame(this.reflow.bind(this,t))}}checkContent(){this.hasHeader=!!this.hostElement.querySelectorAll("[slot=header]").length;this.hasContent=!!this.hostElement.querySelectorAll("[slot=item]").length\|\|this.hasHeader}onItemsChange(){this.checkContent();const t=this.hostElement.querySelectorAll("[slot=item]");t.forEach((t=>{t.setAttribute("role","menuitem");t.dataset.text=t.textContent}))}renderMenuLabel(){if(this.hasContent){return n("button",{class:"menu-label","aria-expanded":this.open?"true":"false","aria-label":this.open?"Chiudi menù":"Apri menù",onClick:this.toggle},n("div",{class:"menu-label-content"},n("slot",{onSlotchange:this.onLabelSlotChange}),n("z-icon",{name:this.open?"chevron-up":"chevron-down"})))}return n("div",{class:"menu-label"},n("div",{class:"menu-label-content"},n("slot",{onSlotchange:this.onLabelSlotChange})))}render(){return n(i,{key:"0ecfa6c7439e2472ebb454362e5dd86b4eef9ad3"},this.renderMenuLabel(),this.hasContent&&n("div",{class:"content",ref:t=>this.content=t},this.hasHeader&&n("header",{class:"header"},n("slot",{name:"header",onSlotchange:this.checkContent})),n("div",{class:"items",role:"menu"},n("slot",{name:"item",onSlotchange:this.onItemsChange}))))}get hostElement(){return o(this)}static get watchers(){return{open:["onOpenChanged"]}}};l.style=s;export{l as z_menu};
2	- //# sourceMappingURL=p-3092c82f.entry.js.map

package/dist/web-components-library/p-3092c82f.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZMenuStyle0","ZMenu","toggle","this","hasContent","open","opened","emit","closed","handleClick","ev","floating","hostElement","contains","target","reflow","onOpenChanged","cancelAnimationFrame","raf","constructor","hostRef","bind","checkContent","onLabelSlotChange","onItemsChange","componentWillLoad","labelElement","assignedElements","dataset","text","textContent","live","content","style","left","getBoundingClientRect","widthPx","getComputedStyle","width","parseFloat","replace","safeScrollbarSpace","Math","min","window","innerWidth","requestAnimationFrame","hasHeader","querySelectorAll","length","items","forEach","item","setAttribute","renderMenuLabel","h","class","onClick","onSlotchange","name","render","Host","key","ref","el","role"],"sources":["src/components/navigation/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/navigation/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n box-sizing: border-box;\n}\n\n:host {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n\n --z-menu-label-color: var(--color-default-text);\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted(*) {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.menu-label {\n padding: 0;\n border: 0;\n margin: 0;\n background: transparent;\n border-radius: 0;\n color: inherit;\n outline: none;\n text-align: left;\n}\n\nbutton.menu-label {\n cursor: pointer;\n}\n\n.menu-label:focus-within {\n z-index: 1;\n padding-right: calc(var(--space-unit) * 0.5);\n padding-left: calc(var(--space-unit) * 0.5);\n margin-right: calc(var(--space-unit) * -0.5);\n margin-left: calc(var(--space-unit) * -0.5);\n box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(*),\n.menu-label:focus-within .menu-label-content ::slotted(*) {\n letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible) {\n box-shadow: none !important;\n}\n\n/* border */\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n content: \"\";\n pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n height: var(--border-size-small);\n background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n height: var(--border-size-large);\n background-color: var(--color-secondary01);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n letter-spacing: normal;\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted(*) {\n display: inline-flex;\n width: 100%;\n margin: 0;\n appearance: none;\n color: var(--z-menu-label-color);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-5);\n font-weight: inherit;\n letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */\n line-height: 1.2;\n outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(*),\n.menu-label .menu-label-content z-icon {\n padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n margin-left: calc(var(--space-unit) * 1.5);\n fill: currentcolor;\n}\n\n.content {\n background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n display: none;\n}\n\n:host([floating]) .content {\n position: absolute;\n top: 100%;\n left: 0;\n width: 375px;\n min-width: 100%;\n max-width: 100vw;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n width: 100%;\n}\n\n.header {\n display: flex;\n align-items: center;\n padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n width: calc(var(--space-unit) * 11.25);\n height: auto;\n object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n margin: auto 0;\n margin-left: calc(var(--space-unit) * 2.5);\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n.items {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.25;\n outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n border-color: var(--color-secondary01);\n font-weight: var(--font-bd);\n}\n","import {Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch, Host} from \"@stencil/core\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n tag: \"z-menu\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenu {\n @Element() hostElement: HTMLZMenuElement;\n\n /** Flag to set the active status of the menu. */\n @Prop({reflect: true})\n active?: boolean;\n\n /**\n * Flag to set the display mode of the list.\n * If true, the list will be absolutely positioned under the menu label,\n * stacked beneath it otherwise.\n */\n @Prop({reflect: true})\n floating? = false;\n\n /** The opening state of the menu. */\n @Prop({mutable: true, reflect: true})\n open = false;\n\n /**\n * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n * A small border is placed under it as a separator from other elements.\n */\n @Prop({reflect: true})\n verticalContext = false;\n\n @State()\n hasHeader: boolean;\n\n @State()\n hasContent: boolean;\n\n private content: HTMLElement;\n\n /** Animation frame request id. */\n private raf: number;\n\n /** The menu has been opened. */\n @Event()\n opened: EventEmitter;\n\n /** The menu has been closed. */\n @Event()\n closed: EventEmitter;\n\n private toggle(): void {\n if (!this.hasContent) {\n return;\n }\n\n this.open = !this.open;\n this.open ? this.opened.emit() : this.closed.emit();\n }\n\n /** Close the floating list when a click is performed outside of this Element. */\n @Listen(\"click\", {target: \"document\"})\n handleClick(ev: MouseEvent): void {\n if (!this.floating || !this.open || this.hostElement.contains(ev.target as Element)) {\n return;\n }\n\n this.reflow();\n this.open = false;\n this.closed.emit();\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n if (this.open) {\n this.reflow(true);\n } else {\n cancelAnimationFrame(this.raf);\n }\n }\n\n constructor() {\n this.toggle = this.toggle.bind(this);\n this.checkContent = this.checkContent.bind(this);\n this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n this.onItemsChange = this.onItemsChange.bind(this);\n }\n\n componentWillLoad(): void {\n this.checkContent();\n }\n\n /**\n * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n * @param ev Slotchange event\n */\n private onLabelSlotChange(ev: Event): void {\n const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n labelElement.dataset.text = labelElement?.textContent;\n }\n\n /**\n * Correctly set position of the floating menu in order to prevent overflow.\n * @param live Should run the method on every refresh frame.\n */\n private reflow(live = false): void {\n if (this.content) {\n const {style} = this.content;\n const {left} = this.hostElement.getBoundingClientRect();\n const widthPx = getComputedStyle(this.content).width;\n const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n const safeScrollbarSpace = 30;\n style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n }\n if (live) {\n this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n }\n }\n\n /**\n * Check if some content slot is set.\n */\n private checkContent(): void {\n this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n }\n\n /**\n * Set `menuitem` role to all menu items.\n * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n */\n private onItemsChange(): void {\n this.checkContent();\n const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n items.forEach((item) => {\n item.setAttribute(\"role\", \"menuitem\");\n item.dataset.text = item.textContent;\n });\n }\n\n private renderMenuLabel(): HTMLButtonElement | HTMLDivElement {\n if (this.hasContent) {\n return (\n <button\n class=\"menu-label\"\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n onClick={this.toggle}\n >\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange}></slot>\n <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n </div>\n </button>\n );\n }\n\n return (\n <div class=\"menu-label\">\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange}></slot>\n </div>\n </div>\n );\n }\n\n render(): HTMLZMenuElement {\n return (\n <Host>\n {this.renderMenuLabel()}\n\n {this.hasContent && (\n <div\n class=\"content\"\n ref={(el) => (this.content = el)}\n >\n {this.hasHeader && (\n <header class=\"header\">\n <slot\n name=\"header\"\n onSlotchange={this.checkContent}\n ></slot>\n </header>\n )}\n\n <div\n class=\"items\"\n role=\"menu\"\n >\n <slot\n name=\"item\"\n onSlotchange={this.onItemsChange}\n ></slot>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,w3HAClB,MAAAC,EAAeD,E,MCYFE,EAAK,MA6CR,MAAAC,GACN,IAAKC,KAAKC,WAAY,CACpB,M,CAGFD,KAAKE,MAAQF,KAAKE,KAClBF,KAAKE,KAAOF,KAAKG,OAAOC,OAASJ,KAAKK,OAAOD,M,CAK/C,WAAAE,CAAYC,GACV,IAAKP,KAAKQ,WAAaR,KAAKE,MAAQF,KAAKS,YAAYC,SAASH,EAAGI,QAAoB,CACnF,M,CAGFX,KAAKY,SACLZ,KAAKE,KAAO,MACZF,KAAKK,OAAOD,M,CAId,aAAAS,GACE,GAAIb,KAAKE,KAAM,CACbF,KAAKY,OAAO,K,KACP,CACLE,qBAAqBd,KAAKe,I,EAI9B,WAAAC,CAAAC,G,4GA9DY,M,UAIL,M,qBAOW,M,mDAoDhBjB,KAAKD,OAASC,KAAKD,OAAOmB,KAAKlB,MAC/BA,KAAKmB,aAAenB,KAAKmB,aAAaD,KAAKlB,MAC3CA,KAAKoB,kBAAoBpB,KAAKoB,kBAAkBF,KAAKlB,MACrDA,KAAKqB,cAAgBrB,KAAKqB,cAAcH,KAAKlB,K,CAG/C,iBAAAsB,GACEtB,KAAKmB,c,CAOC,iBAAAC,CAAkBb,GACxB,MAAMgB,EAAgBhB,EAAGI,OAA2Ba,mBAAmB,GACvED,EAAaE,QAAQC,KAAOH,IAAY,MAAZA,SAAY,SAAZA,EAAcI,W,CAOpC,MAAAf,CAAOgB,EAAO,OACpB,GAAI5B,KAAK6B,QAAS,CAChB,MAAMC,MAACA,GAAS9B,KAAK6B,QACrB,MAAME,KAACA,GAAQ/B,KAAKS,YAAYuB,wBAChC,MAAMC,EAAUC,iBAAiBlC,KAAK6B,SAASM,MAC/C,MAAMA,EAAQF,EAAUG,WAAWH,EAAQI,QAAQ,KAAM,KAAO,IAChE,MAAMC,EAAqB,GAC3BR,EAAMC,KAAO,GAAGQ,KAAKC,IAAIC,OAAOC,WAAaX,EAAOI,EAAQG,EAAoB,M,CAElF,GAAIV,EAAM,CACR5B,KAAKe,IAAM4B,sBAAsB3C,KAAKY,OAAOM,KAAKlB,KAAM4B,G,EAOpD,YAAAT,GACNnB,KAAK4C,YAAc5C,KAAKS,YAAYoC,iBAAiB,iBAAiBC,OACtE9C,KAAKC,aAAeD,KAAKS,YAAYoC,iBAAiB,eAAeC,QAAU9C,KAAK4C,S,CAO9E,aAAAvB,GACNrB,KAAKmB,eACL,MAAM4B,EAAQ/C,KAAKS,YAAYoC,iBAA8B,eAC7DE,EAAMC,SAASC,IACbA,EAAKC,aAAa,OAAQ,YAC1BD,EAAKxB,QAAQC,KAAOuB,EAAKtB,WAAW,G,CAIhC,eAAAwB,GACN,GAAInD,KAAKC,WAAY,CACnB,OACEmD,EAAA,UACEC,MAAM,aAAY,gBACHrD,KAAKE,KAAO,OAAS,QAAO,aAC/BF,KAAKE,KAAO,cAAgB,YACxCoD,QAAStD,KAAKD,QAEdqD,EAAA,OAAKC,MAAM,sBACTD,EAAA,QAAMG,aAAcvD,KAAKoB,oBACzBgC,EAAA,UAAQI,KAAMxD,KAAKE,KAAO,aAAe,kB,CAMjD,OACEkD,EAAA,OAAKC,MAAM,cACTD,EAAA,OAAKC,MAAM,sBACTD,EAAA,QAAMG,aAAcvD,KAAKoB,qB,CAMjC,MAAAqC,GACE,OACEL,EAACM,EAAI,CAAAC,IAAA,4CACF3D,KAAKmD,kBAELnD,KAAKC,YACJmD,EAAA,OACEC,MAAM,UACNO,IAAMC,GAAQ7D,KAAK6B,QAAUgC,GAE5B7D,KAAK4C,WACJQ,EAAA,UAAQC,MAAM,UACZD,EAAA,QACEI,KAAK,SACLD,aAAcvD,KAAKmB,gBAKzBiC,EAAA,OACEC,MAAM,QACNS,KAAK,QAELV,EAAA,QACEI,KAAK,OACLD,aAAcvD,KAAKqB,kB"}

package/dist/web-components-library/p-3ba8b8e1.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as i,g as s}from"./p-10bb4f4b.js";import{q as a}from"./p-025f494e.js";import{a as o}from"./p-955da62e.js";import{H as r}from"./p-54b0b04e.js";import"./p-2c886e8b.js";const n=":host{width:inherit;height:100%;margin:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;width:0;height:0}:host>div>div.background.open{width:100%;height:100%}:host>div>div.content-wrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.content-wrapper>div{margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);border-radius:var(--space-unit) var(--space-unit) 0 0;box-shadow:0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%)}";const c=n;const d=class{constructor(i){t(this,i);this.pocketToggle=e(this,"pocketToggle",7);this.pocketid=undefined;this.status=a.PREVIEW}async open(){this.status=a.OPEN}async close(){this.status=a.CLOSED}emitPocketToggle(t,e){this.pocketToggle.emit({id:t,status:e})}handlePocketHeaderClick(t){if(t.detail.id&&t.detail.id===this.pocketid){switch(this.status){case a.PREVIEW:case a.CLOSED:this.status=a.OPEN;break;case a.OPEN:this.status=a.CLOSED;break}}}handlePocketHeaderPan(t){if(t.detail.id&&t.detail.id===this.pocketid){if(t.detail.direction==="up"){this.status=a.OPEN}else if(t.detail.direction==="down"){this.status=a.CLOSED}}}watchStatusHandler(t){this.emitPocketToggle(this.pocketid,t)}componentWillLoad(){this.emitPocketToggle(this.pocketid,this.status)}handleBackgroundClick(t){if(t.target.dataset.action=="pocketBackground"){this.close()}}render(){return i("div",{key:"380d3967f3e1c227bd1895c972327425313b87b8"},i("div",{key:"781e4595f07f68092ffd16442af0a6ff272164a0","data-action":"pocketBackground","data-pocket":this.pocketid,class:`background ${this.status}`,onClick:t=>this.handleBackgroundClick(t)}),i("div",{key:"6f902c3c03baf3cfd6d4a4302333df049c6bae35",id:this.pocketid,class:"content-wrapper"},i("div",{key:"c7029dcd23c29dc5bc797293271771084b9f6b31"},i("slot",{key:"770b7882d607fccbdc095ebe662193a36aa515bd"}))))}get hostElement(){return s(this)}static get watchers(){return{status:["watchStatusHandler"]}}};d.style=c;const h=":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>main{overflow:auto;border-right:var(--border-size-small) solid var(--color-surface03);border-left:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";const l=h;const f=class{constructor(e){t(this,e);this.pocketid=undefined;this.status=a.PREVIEW}handlePocketToggle(t){if(t.detail.id&&t.detail.id===this.pocketid){this.status=t.detail.status}}render(){return i("main",{key:"e9cb89b3b1a529205e689a7e39ba780695a2fea4",class:this.status},i("slot",{key:"705e4752dd80c52f8a744ef85d00737a505ab01b"}))}};f.style=l;const b=":host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>header{display:flex;height:36px;flex-flow:row nowrap;align-items:center;justify-content:center;border:var(--border-size-small) solid var(--color-surface03);background:var(--color-surface01);border-radius:var(--space-unit) var(--space-unit) 0 0;cursor:pointer}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";const p=b;const u=class{emitPocketHeaderClick(){this.pocketHeaderClick.emit({id:this.pocketid})}emitPocketHeaderPan(t){this.pocketHeaderPan.emit({id:this.pocketid,direction:t})}constructor(i){t(this,i);this.pocketHeaderClick=e(this,"pocketHeaderClick",7);this.pocketHeaderPan=e(this,"pocketHeaderPan",7);this.pocketid=undefined;this.emitPocketHeaderClick=this.emitPocketHeaderClick.bind(this)}componentDidLoad(){const t=new r(this.swipeWrap);t.get("pan").set({direction:r.DIRECTION_VERTICAL});t.on("panup",(()=>this.emitPocketHeaderPan("up")));t.on("pandown",(()=>this.emitPocketHeaderPan("down")))}render(){return i("header",{key:"dbf411ce43b511c02c768d79c20eb95991b3555d",role:"button",tabindex:0,onClick:()=>this.emitPocketHeaderClick(),onKeyPress:t=>o(t,this.emitPocketHeaderClick),ref:t=>this.swipeWrap=t},i("slot",{key:"30b0c595f0c4e503dbe8e144c3805be2a8d4aed5"}))}};u.style=p;export{d as z_pocket,f as z_pocket_body,u as z_pocket_header};
2	- //# sourceMappingURL=p-3ba8b8e1.entry.js.map

package/dist/web-components-library/p-3ba8b8e1.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZPocketStyle0","ZPocket","PocketStatus","PREVIEW","open","this","status","OPEN","close","CLOSED","emitPocketToggle","id","pocketToggle","emit","handlePocketHeaderClick","e","detail","pocketid","handlePocketHeaderPan","direction","watchStatusHandler","newVal","componentWillLoad","handleBackgroundClick","target","dataset","action","render","h","key","class","onClick","ZPocketBodyStyle0","ZPocketBody","handlePocketToggle","ZPocketHeaderStyle0","ZPocketHeader","emitPocketHeaderClick","pocketHeaderClick","emitPocketHeaderPan","pocketHeaderPan","constructor","hostRef","bind","componentDidLoad","mc","Hammer","swipeWrap","get","set","DIRECTION_VERTICAL","on","role","tabindex","onKeyPress","ev","handleKeyboardSubmit","ref","el"],"sources":["src/snowflakes/myz/pocket/z-pocket/styles.css?tag=z-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket/index.tsx","src/snowflakes/myz/pocket/z-pocket-body/styles.css?tag=z-pocket-body&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-body/index.tsx","src/snowflakes/myz/pocket/z-pocket-header/styles.css?tag=z-pocket-header&encapsulation=shadow","src/snowflakes/myz/pocket/z-pocket-header/index.tsx"],"sourcesContent":[":host {\n width: inherit;\n height: 100%;\n margin: inherit;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n width: inherit;\n height: 100%;\n margin: inherit;\n}\n\n:host > div > div.background {\n position: fixed;\n z-index: 998;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 0;\n height: 0;\n}\n\n:host > div > div.background.open {\n width: 100%;\n height: 100%;\n}\n\n:host > div > div.content-wrapper {\n position: fixed;\n z-index: 999;\n bottom: 0;\n left: 0;\n width: inherit;\n margin: inherit;\n}\n\n:host > div > div.content-wrapper > div {\n margin: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5);\n border-radius: var(--space-unit) var(--space-unit) 0 0;\n box-shadow: 0 -2px calc(var(--space-unit) * 0.5) 0 rgb(66 69 72 / 40%);\n}\n","import {Component, Prop, h, Method, Event, EventEmitter, Listen, Element, Watch} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot - pocket content\n */\n@Component({\n tag: \"z-pocket\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPocket {\n @Element() hostElement: HTMLZPocketElement;\n\n /** pocket id */\n @Prop()\n pocketid: string;\n\n /** pocket status */\n @Prop({mutable: true})\n status: PocketStatus = PocketStatus.PREVIEW;\n\n /** open z-pocket */\n @Method()\n async open(): Promise<void> {\n this.status = PocketStatus.OPEN;\n }\n\n /** close z-pocket */\n @Method()\n async close(): Promise<void> {\n this.status = PocketStatus.CLOSED;\n }\n\n /** Emitted on pocket toggle, returns pocket id and status */\n @Event()\n pocketToggle: EventEmitter;\n\n private emitPocketToggle(id: string, status: PocketStatus): void {\n this.pocketToggle.emit({id, status});\n }\n\n @Listen(\"pocketHeaderClick\")\n handlePocketHeaderClick(e: CustomEvent): void {\n if (e.detail.id && e.detail.id === this.pocketid) {\n switch (this.status) {\n case PocketStatus.PREVIEW:\n case PocketStatus.CLOSED:\n this.status = PocketStatus.OPEN;\n break;\n case PocketStatus.OPEN:\n this.status = PocketStatus.CLOSED;\n break;\n }\n }\n }\n\n @Listen(\"pocketHeaderPan\")\n handlePocketHeaderPan(e: CustomEvent): void {\n if (e.detail.id && e.detail.id === this.pocketid) {\n if (e.detail.direction === \"up\") {\n this.status = PocketStatus.OPEN;\n } else if (e.detail.direction === \"down\") {\n this.status = PocketStatus.CLOSED;\n }\n }\n }\n\n @Watch(\"status\")\n watchStatusHandler(newVal: PocketStatus): void {\n this.emitPocketToggle(this.pocketid, newVal);\n }\n\n componentWillLoad(): void {\n this.emitPocketToggle(this.pocketid, this.status);\n }\n\n private handleBackgroundClick(e: MouseEvent): void {\n if ((e.target as HTMLElement).dataset.action == \"pocketBackground\") {\n this.close();\n }\n }\n\n render(): HTMLDivElement {\n return (\n <div>\n <div\n data-action=\"pocketBackground\"\n data-pocket={this.pocketid}\n class={`background ${this.status}`}\n onClick={(e: MouseEvent) => this.handleBackgroundClick(e)}\n />\n <div\n id={this.pocketid}\n class=\"content-wrapper\"\n >\n <div>\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n",":host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > main {\n overflow: auto;\n border-right: var(--border-size-small) solid var(--color-surface03);\n border-left: var(--border-size-small) solid var(--color-surface03);\n background: var(--color-surface01);\n scrollbar-width: none;\n}\n\n:host > main.preview {\n max-height: 225px;\n transition: all 200ms ease-in-out, top 200ms ease-in-out;\n}\n\n:host > main.open {\n max-height: calc(100vh - 48px);\n transition: all 200ms ease-in-out, top 200ms ease-in-out;\n}\n\n:host > main.closed {\n height: 0;\n transition: all 200ms ease-in-out, top 200ms ease-in-out;\n}\n\n:host ::-webkit-scrollbar {\n width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n :host > main.preview {\n max-height: 157px;\n }\n}\n","import {Component, h, Prop, Listen} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot - pocket body content\n */\n@Component({\n tag: \"z-pocket-body\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPocketBody {\n /** pocket id */\n @Prop()\n pocketid: string;\n\n /** pocket status */\n @Prop({mutable: true})\n status: PocketStatus = PocketStatus.PREVIEW;\n\n @Listen(\"pocketToggle\", {target: \"body\"})\n handlePocketToggle(e: CustomEvent): void {\n if (e.detail.id && e.detail.id === this.pocketid) {\n this.status = e.detail.status;\n }\n }\n\n render(): HTMLElement {\n return (\n <main class={this.status}>\n <slot />\n </main>\n );\n }\n}\n",":host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > header {\n display: flex;\n height: 36px;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n border: var(--border-size-small) solid var(--color-surface03);\n background: var(--color-surface01);\n border-radius: var(--space-unit) var(--space-unit) 0 0;\n cursor: pointer;\n}\n\n:host > header:focus {\n outline: none;\n}\n\n:host > header::-moz-focus-inner {\n border: 0;\n}\n","import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\nimport {handleKeyboardSubmit} from \"../../../../utils/utils\";\nimport Hammer from \"hammerjs\";\n\n/**\n * @slot - pocket header content\n */\n@Component({\n tag: \"z-pocket-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZPocketHeader {\n /** pocket id */\n @Prop()\n pocketid: string;\n\n private swipeWrap: HTMLElement;\n\n /** Emitted on pocket header click */\n @Event()\n pocketHeaderClick: EventEmitter;\n\n private emitPocketHeaderClick(): void {\n this.pocketHeaderClick.emit({id: this.pocketid});\n }\n\n /** Emitted on pocket header pan */\n @Event()\n pocketHeaderPan: EventEmitter;\n\n private emitPocketHeaderPan(direction: string): void {\n this.pocketHeaderPan.emit({id: this.pocketid, direction});\n }\n\n constructor() {\n this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);\n }\n\n componentDidLoad(): void {\n // INFO: swipe handling\n const mc = new Hammer(this.swipeWrap);\n mc.get(\"pan\").set({direction: Hammer.DIRECTION_VERTICAL});\n mc.on(\"panup\", () => this.emitPocketHeaderPan(\"up\"));\n mc.on(\"pandown\", () => this.emitPocketHeaderPan(\"down\"));\n }\n\n render(): HTMLElement {\n return (\n <header\n role=\"button\"\n tabindex={0}\n onClick={() => this.emitPocketHeaderClick()}\n onKeyPress={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick)}\n ref={(el) => (this.swipeWrap = el as HTMLElement)}\n >\n <slot />\n </header>\n );\n }\n}\n"],"mappings":"6LAAA,MAAMA,EAAY,mqBAClB,MAAAC,EAAeD,E,MCUFE,EAAO,M,wGASKC,EAAaC,O,CAIpC,UAAMC,GACJC,KAAKC,OAASJ,EAAaK,I,CAK7B,WAAMC,GACJH,KAAKC,OAASJ,EAAaO,M,CAOrB,gBAAAC,CAAiBC,EAAYL,GACnCD,KAAKO,aAAaC,KAAK,CAACF,KAAIL,U,CAI9B,uBAAAQ,CAAwBC,GACtB,GAAIA,EAAEC,OAAOL,IAAMI,EAAEC,OAAOL,KAAON,KAAKY,SAAU,CAChD,OAAQZ,KAAKC,QACX,KAAKJ,EAAaC,QAClB,KAAKD,EAAaO,OAChBJ,KAAKC,OAASJ,EAAaK,KAC3B,MACF,KAAKL,EAAaK,KAChBF,KAAKC,OAASJ,EAAaO,OAC3B,M,EAMR,qBAAAS,CAAsBH,GACpB,GAAIA,EAAEC,OAAOL,IAAMI,EAAEC,OAAOL,KAAON,KAAKY,SAAU,CAChD,GAAIF,EAAEC,OAAOG,YAAc,KAAM,CAC/Bd,KAAKC,OAASJ,EAAaK,I,MACtB,GAAIQ,EAAEC,OAAOG,YAAc,OAAQ,CACxCd,KAAKC,OAASJ,EAAaO,M,GAMjC,kBAAAW,CAAmBC,GACjBhB,KAAKK,iBAAiBL,KAAKY,SAAUI,E,CAGvC,iBAAAC,GACEjB,KAAKK,iBAAiBL,KAAKY,SAAUZ,KAAKC,O,CAGpC,qBAAAiB,CAAsBR,GAC5B,GAAKA,EAAES,OAAuBC,QAAQC,QAAU,mBAAoB,CAClErB,KAAKG,O,EAIT,MAAAmB,GACE,OACEC,EAAA,OAAAC,IAAA,4CACED,EAAA,OAAAC,IAAA,yDACc,mBAAkB,cACjBxB,KAAKY,SAClBa,MAAO,cAAczB,KAAKC,SAC1ByB,QAAUhB,GAAkBV,KAAKkB,sBAAsBR,KAEzDa,EAAA,OAAAC,IAAA,2CACElB,GAAIN,KAAKY,SACTa,MAAM,mBAENF,EAAA,OAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,+C,0GCjGZ,MAAM9B,EAAY,ktBAClB,MAAAiC,EAAejC,E,MCUFkC,EAAW,M,6DAOC/B,EAAaC,O,CAGpC,kBAAA+B,CAAmBnB,GACjB,GAAIA,EAAEC,OAAOL,IAAMI,EAAEC,OAAOL,KAAON,KAAKY,SAAU,CAChDZ,KAAKC,OAASS,EAAEC,OAAOV,M,EAI3B,MAAAqB,GACE,OACEC,EAAA,QAAAC,IAAA,2CAAMC,MAAOzB,KAAKC,QAChBsB,EAAA,QAAAC,IAAA,6C,aC9BR,MAAM9B,EAAY,wcAClB,MAAAoC,EAAepC,E,MCWFqC,EAAa,MAWhB,qBAAAC,GACNhC,KAAKiC,kBAAkBzB,KAAK,CAACF,GAAIN,KAAKY,U,CAOhC,mBAAAsB,CAAoBpB,GAC1Bd,KAAKmC,gBAAgB3B,KAAK,CAACF,GAAIN,KAAKY,SAAUE,a,CAGhD,WAAAsB,CAAAC,G,wIACErC,KAAKgC,sBAAwBhC,KAAKgC,sBAAsBM,KAAKtC,K,CAG/D,gBAAAuC,GAEE,MAAMC,EAAK,IAAIC,EAAOzC,KAAK0C,WAC3BF,EAAGG,IAAI,OAAOC,IAAI,CAAC9B,UAAW2B,EAAOI,qBACrCL,EAAGM,GAAG,SAAS,IAAM9C,KAAKkC,oBAAoB,QAC9CM,EAAGM,GAAG,WAAW,IAAM9C,KAAKkC,oBAAoB,S,CAGlD,MAAAZ,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEuB,KAAK,SACLC,SAAU,EACVtB,QAAS,IAAM1B,KAAKgC,wBACpBiB,WAAaC,GAAsBC,EAAqBD,EAAIlD,KAAKgC,uBACjEoB,IAAMC,GAAQrD,KAAK0C,UAAYW,GAE/B9B,EAAA,QAAAC,IAAA,6C"}

package/dist/web-components-library/p-3bae6330.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as i,h as e,a as n,g as s}from"./p-10bb4f4b.js";import{w as a,p as r,D as o}from"./p-025f494e.js";import{g as l}from"./p-955da62e.js";import"./p-2c886e8b.js";const c=':host{color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:flex;flex-direction:column}:host .modal-wrapper{display:flex;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2)}:host .modal-wrapper>.files-wrapper{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:flex;flex-direction:column;margin:auto}:host .text-container .body-1{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin:calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);font-size:calc(var(--space-unit) * 3);font-weight:var(--font-sb)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>.heading-4-sb{display:inline-block;margin:calc(var(--space-unit) * 3) 0;font-size:calc(var(--space-unit) * 2);font-weight:var(--font-sb)}:host([type="dragdrop"])>.container>.files-container>.heading-4-sb{margin-top:0;margin-bottom:calc(var(--space-unit) * 3)}:host>.container>.files-container>.files-wrapper{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}:host([type="dragdrop"])>.container>.files-container>z-divider{margin:calc(var(--space-unit) * 3) 0}:host .error-message{font-size:14px;font-weight:400;letter-spacing:0.16%;line-height:20px;text-align:left}:host .error-message>.file-name{font-weight:600}@media only screen and (min-width: 768px){:host>.container>z-button{align-self:flex-start}:host .modal-wrapper{padding:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){:host .modal-wrapper{padding:calc(var(--space-unit) * 4)}}';const d=c;const h=class{constructor(e){t(this,e);this.fileInput=i(this,"fileInput",7);this.inputAttributes={type:"file",id:"file-elem",multiple:true};this.type=a.DEFAULT;this.buttonVariant=undefined;this.acceptedFormat=undefined;this.fileMaxSize=undefined;this.mainTitle=undefined;this.description=undefined;this.files=[];this.uploadBtnLabel="allega";this.dragAndDropLabel="Rilascia i file in questa area per allegarli.";this.hasFileSection=true;this.invalidFiles=undefined}removeFileListener(t){this.removeFileHandler(t.detail)}fileDroppedListener(t){this.input.files=t.detail;this.fileInputHandler()}componentDidUpdate(){this.handleAccessibility();this.invalidFiles.size&&this.errorModal.focus()}componentWillLoad(){this.invalidFiles=new Map}fileInputHandler(){if(this.input.files.length){this.invalidFiles=this.checkFiles(Array.from(this.input.files))}}async getFiles(){return this.files}async removeFile(t){this.removeFileHandler(t)}removeFileHandler(t){const i=this.files;const e=i.find((i=>i.name===t));if(e){const t=i.indexOf(e);if(t>=0){i.splice(t,1);this.files=[...i]}}}getType(){if(l()!==r.DESKTOP&&l()!==r.DESKTOP_WIDE){return a.DEFAULT}return this.type}handleAccessibility(){const t=this.el.querySelector("z-file:last-child z-chip button");if(this.files.length>0&&t){t.focus()}else{this.getType()===a.DEFAULT?this.button.querySelector("button").focus():this.uploadLink.focus()}}checkFiles(t){const i=new Map;const e=`supera il limite di ${this.fileMaxSize}MB`;const n=" ha un formato non supportato";t.forEach((t=>{const s=t.size/1024/1024;const a=this.acceptedFormat.split(",").some((i=>t.name.toLowerCase().endsWith(i.trim())));const r=s<=this.fileMaxSize;if(r&&a){if(!this.files.find((i=>i.name===t.name))){this.files.push(t);this.fileInput.emit(t);this.input.value=""}return}i.set(t.name,[]);if(!r){i.get(t.name).push(e)}if(!a){i.get(t.name).push(n)}}));return i}renderTitle(){return e("span",{id:"title"},this.mainTitle)}renderDescription(t){return e("span",{class:t},this.description)}renderAllowedFileExtensions(){let t="";let i="";if(this.acceptedFormat){const i=this.acceptedFormat.split(", ").map((t=>t.substring(1).toUpperCase())).join(", ");t=` nei formati ${i}`}if(this.fileMaxSize){i=` per un massimo di ${this.fileMaxSize}MB di peso`}const n=`Puoi allegare file${t}${i}.`;return e("span",{class:"body-3"},t\|\|i?n:null)}renderFileSection(){if(!this.hasFileSection){return}return e("section",{class:`files-container ${!this.files.length?"hidden":""}`},e("span",{class:"heading-4-sb"},"File appena caricati"),e("div",{class:"files-wrapper"},e("slot",{name:"files"})),e("z-divider",{size:o.MEDIUM}))}renderInput(){return e("input",Object.assign({},this.inputAttributes,{onChange:()=>this.fileInputHandler(),accept:this.acceptedFormat,ref:t=>this.input=t}))}renderUploadButton(){return[this.renderInput(),e("z-button",{onClick:()=>this.input.click(),onKeyPress:t=>{if(t.code=="Space"\|\|t.code=="Enter"){t.preventDefault();this.input.click()}},id:"fileSelect",variant:this.buttonVariant,icon:"upload",ref:t=>this.button=t},this.uploadBtnLabel)]}renderUploadLink(){return[this.renderInput(),e("span",{class:"body-1 upload-link-text"},"Trascina o"," ",e("span",{tabIndex:0,class:"body-1-sb upload-link",onClick:()=>this.input.click(),onKeyPress:t=>{if(t.code=="Space"\|\|t.code=="Enter"){t.preventDefault();this.input.click()}},ref:t=>this.uploadLink=t},"carica")," ","dal tuo computer")]}renderDefaultMode(){return[this.renderDescription("body-3-sb"),this.renderAllowedFileExtensions(),this.renderFileSection(),this.renderUploadButton()]}renderDragDropMode(){return[this.renderFileSection(),e("z-dragdrop-area",{"drag-and-drop-label":this.dragAndDropLabel},e("div",{class:"text-container"},this.renderDescription("body-1"),this.renderUploadLink(),this.renderAllowedFileExtensions()))]}formatErrorString(t,i){var n,s;const a=i[0]&&i[1]?" e ":"";return e("span",{class:"error-message"},"Il file ",e("span",{class:"file-name"},t)," ",(n=i[1])!==null&&n!==void 0?n:"",a,(s=i[0])!==null&&s!==void 0?s:"",".")}handleErrorModalContent(){return e("div",{slot:"modalContent"},e("div",{class:"modal-wrapper"},e("div",{class:"files"},Array.from(this.invalidFiles).map((([t,i])=>e("span",{class:"body-3"},this.formatErrorString(t,i)))))))}render(){return e(n,{key:"a3d761286217ef951686119b60ec51779833dd7c"},e("div",{key:"a95c0abe6e8fdcaa4ef6991db9e138eb5fb2ba03",tabIndex:0,class:`container ${this.getType()}`},this.mainTitle&&this.renderTitle(),this.getType()==a.DEFAULT?this.renderDefaultMode():this.renderDragDropMode()),!!this.invalidFiles.size&&e("z-modal",{modalid:`file-upload-${this.type}-error-modal`,tabIndex:0,ref:t=>this.errorModal=t,modaltitle:"Errore di caricamento",onModalClose:()=>this.invalidFiles=new Map,onModalBackgroundClick:()=>this.invalidFiles=new Map},this.handleErrorModalContent()))}get el(){return s(this)}};h.style=d;export{h as z_file_upload};
2	- //# sourceMappingURL=p-3bae6330.entry.js.map

package/dist/web-components-library/p-3bae6330.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZFileUploadStyle0","ZFileUpload","this","inputAttributes","type","id","multiple","ZFileUploadType","DEFAULT","removeFileListener","e","removeFileHandler","detail","fileDroppedListener","input","files","fileInputHandler","componentDidUpdate","handleAccessibility","invalidFiles","size","errorModal","focus","componentWillLoad","Map","length","checkFiles","Array","from","getFiles","removeFile","fileName","file","find","name","index","indexOf","splice","getType","getDevice","Device","DESKTOP","DESKTOP_WIDE","lastFile","el","querySelector","button","uploadLink","errors","sizeErrorString","fileMaxSize","formatErrorString","forEach","fileSize","fileFormatOk","acceptedFormat","split","some","ext","toLowerCase","endsWith","trim","fileSizeOk","f","push","fileInput","emit","value","set","get","renderTitle","h","mainTitle","renderDescription","cssClass","class","description","renderAllowedFileExtensions","fileFormatString","fileWeightString","fileFormat","map","string","substring","toUpperCase","join","finalString","renderFileSection","hasFileSection","DividerSize","MEDIUM","renderInput","Object","assign","onChange","accept","ref","val","renderUploadButton","onClick","click","onKeyPress","code","preventDefault","variant","buttonVariant","icon","uploadBtnLabel","renderUploadLink","tabIndex","renderDefaultMode","renderDragDropMode","dragAndDropLabel","key","bothErrors","_a","_b","handleErrorModalContent","slot","render","Host","modalid","modaltitle","onModalClose","onModalBackgroundClick"],"sources":["src/components/file-upload/z-file-upload/styles.css?tag=z-file-upload&encapsulation=shadow","src/components/file-upload/z-file-upload/index.tsx"],"sourcesContent":[":host {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > .container {\n display: flex;\n flex-direction: column;\n}\n\n:host .modal-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: calc(var(--space-unit) * 2);\n}\n\n:host .modal-wrapper > .files-wrapper {\n display: flex;\n flex-direction: column;\n margin: calc(var(--space-unit) * 4);\n gap: var(--space-unit);\n}\n\n:host .text-container {\n display: flex;\n flex-direction: column;\n margin: auto;\n}\n\n:host .text-container .body-1 {\n text-align: center;\n}\n\n:host .text-container .upload-link {\n color: var(--color-link-primary);\n cursor: pointer;\n}\n\n:host .text-container .upload-link-text {\n margin-bottom: var(--space-unit);\n}\n\ninput#file-elem {\n display: none;\n}\n\n#title {\n display: inline-block;\n margin: calc(var(--space-unit) * 2.5) 0 calc(var(--space-unit) * 4);\n font-size: calc(var(--space-unit) * 3);\n font-weight: var(--font-sb);\n}\n\n:host > .container > z-button {\n display: inline-block;\n margin-top: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container.hidden {\n display: none;\n}\n\n:host > .container > .files-container > .heading-4-sb {\n display: inline-block;\n margin: calc(var(--space-unit) * 3) 0;\n font-size: calc(var(--space-unit) * 2);\n font-weight: var(--font-sb);\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > .heading-4-sb {\n margin-top: 0;\n margin-bottom: calc(var(--space-unit) * 3);\n}\n\n:host > .container > .files-container > .files-wrapper {\n display: flex;\n flex-wrap: wrap;\n column-gap: calc(var(--space-unit) * 2);\n row-gap: calc(var(--space-unit) * 2);\n}\n\n:host > .container > .files-container > z-divider {\n margin-top: calc(var(--space-unit) * 3);\n margin-bottom: 0;\n}\n\n:host([type=\"dragdrop\"]) > .container > .files-container > z-divider {\n margin: calc(var(--space-unit) * 3) 0;\n}\n\n:host .error-message {\n font-size: 14px;\n font-weight: 400;\n letter-spacing: 0.16%;\n line-height: 20px;\n text-align: left;\n}\n\n:host .error-message > .file-name {\n font-weight: 600;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n :host > .container > z-button {\n align-self: flex-start;\n }\n\n :host .modal-wrapper {\n padding: calc(var(--space-unit) * 3);\n }\n}\n\n@media only screen and (min-width: 1152px) {\n :host .modal-wrapper {\n padding: calc(var(--space-unit) * 4);\n }\n}\n","import {Component, Prop, h, EventEmitter, Event, State, Listen, Element, Host, Method} from \"@stencil/core\";\nimport {ButtonVariant, Device, DividerSize, ZFileUploadType} from \"../../../beans\";\nimport {getDevice} from \"../../../utils/utils\";\n\n@Component({\n tag: \"z-file-upload\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZFileUpload {\n /** Prop indicating the file upload type - can be default or dragdrop */\n @Prop({reflect: true})\n type: ZFileUploadType = ZFileUploadType.DEFAULT;\n\n /** Prop indicating the button variant*/\n @Prop()\n buttonVariant?: ButtonVariant;\n\n /** Prop indicating the accepted file type: ex \".pdf, .doc, .jpg\" */\n @Prop()\n acceptedFormat?: string;\n\n /** Max file dimension in Megabyte */\n @Prop()\n fileMaxSize?: number;\n\n /** Title */\n @Prop()\n mainTitle?: string;\n\n /** Description */\n @Prop()\n description?: string;\n\n /** Files added by the user */\n @State()\n files: File[] = [];\n\n /** upoload button label */\n @Prop()\n uploadBtnLabel?: string = \"allega\";\n\n /** drag & drop button label */\n @Prop()\n dragAndDropLabel?: string = \"Rilascia i file in questa area per allegarli.\";\n\n /** uploaded files history rendering */\n @Prop()\n hasFileSection?: boolean = true;\n\n /** List of files not allowed to be uploaded */\n @State()\n invalidFiles: Map<string, string[]>;\n\n @Element() el: HTMLZFileUploadElement;\n\n private input: HTMLInputElement;\n\n private button: HTMLZButtonElement;\n\n private errorModal: HTMLZModalElement;\n\n private uploadLink: HTMLSpanElement;\n\n private inputAttributes = {\n type: \"file\",\n id: \"file-elem\",\n multiple: true,\n };\n\n /** Listen removeFile event sent from z-file component */\n @Listen(\"removeFile\")\n removeFileListener(e: CustomEvent): void {\n this.removeFileHandler(e.detail);\n }\n\n /** Listen fileDropped event sent from z-dragdrop-area component */\n @Listen(\"fileDropped\")\n fileDroppedListener(e: CustomEvent): void {\n this.input.files = e.detail;\n this.fileInputHandler();\n }\n\n componentDidUpdate(): void {\n this.handleAccessibility();\n this.invalidFiles.size && this.errorModal.focus();\n }\n\n componentWillLoad(): void {\n this.invalidFiles = new Map<string, string[]>();\n }\n\n /** Emitted when user select one or more files */\n @Event()\n fileInput: EventEmitter;\n\n private fileInputHandler(): void {\n if (this.input.files.length) {\n this.invalidFiles = this.checkFiles(Array.from(this.input.files));\n }\n }\n\n /** get array of uploaded files */\n @Method()\n async getFiles(): Promise<File[]> {\n return this.files;\n }\n\n /** remove file from the array */\n @Method()\n async removeFile(fileName: string): Promise<void> {\n this.removeFileHandler(fileName);\n }\n\n private removeFileHandler(fileName: string): void {\n const files = this.files;\n const file = files.find((file) => file.name === fileName);\n if (file) {\n const index = files.indexOf(file);\n if (index >= 0) {\n files.splice(index, 1);\n this.files = [...files];\n }\n }\n }\n\n private getType(): ZFileUploadType {\n if (getDevice() !== Device.DESKTOP && getDevice() !== Device.DESKTOP_WIDE) {\n return ZFileUploadType.DEFAULT;\n }\n\n return this.type;\n }\n\n private handleAccessibility(): void {\n const lastFile = this.el.querySelector(\"z-file:last-child z-chip button\");\n if (this.files.length > 0 && lastFile) {\n (lastFile as HTMLElement).focus();\n } else {\n this.getType() === ZFileUploadType.DEFAULT\n ? this.button.querySelector(\"button\").focus()\n : this.uploadLink.focus();\n }\n }\n\n private checkFiles(files: File[]): Map<string, string[]> {\n const errors = new Map<string, string[]>();\n const sizeErrorString = `supera il limite di ${this.fileMaxSize}MB`;\n const formatErrorString = \" ha un formato non supportato\";\n files.forEach((file: File) => {\n const fileSize = file.size / 1024 / 1024;\n const fileFormatOk = this.acceptedFormat\n .split(\",\")\n .some((ext: string) => file.name.toLowerCase().endsWith(ext.trim()));\n const fileSizeOk = fileSize <= this.fileMaxSize;\n if (fileSizeOk && fileFormatOk) {\n if (!this.files.find((f) => f.name === file.name)) {\n this.files.push(file);\n this.fileInput.emit(file);\n this.input.value = \"\";\n }\n\n return;\n }\n errors.set(file.name, []);\n if (!fileSizeOk) {\n errors.get(file.name).push(sizeErrorString);\n }\n if (!fileFormatOk) {\n errors.get(file.name).push(formatErrorString);\n }\n });\n\n return errors;\n }\n\n private renderTitle(): HTMLElement {\n return <span id=\"title\">{this.mainTitle}</span>;\n }\n\n private renderDescription(cssClass): HTMLElement {\n return <span class={cssClass}>{this.description}</span>;\n }\n\n private renderAllowedFileExtensions(): HTMLElement {\n let fileFormatString = \"\";\n let fileWeightString = \"\";\n\n if (this.acceptedFormat) {\n const fileFormat = this.acceptedFormat\n .split(\", \")\n .map((string) => string.substring(1).toUpperCase())\n .join(\", \");\n fileFormatString = ` nei formati ${fileFormat}`;\n }\n\n if (this.fileMaxSize) {\n fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;\n }\n\n const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;\n\n return <span class=\"body-3\">{fileFormatString || fileWeightString ? finalString : null}</span>;\n }\n\n private renderFileSection(): HTMLElement {\n if (!this.hasFileSection) {\n return;\n }\n\n return (\n <section class={`files-container ${!this.files.length ? \"hidden\" : \"\"}`}>\n <span class=\"heading-4-sb\">File appena caricati</span>\n <div class=\"files-wrapper\">\n <slot name=\"files\" />\n </div>\n <z-divider size={DividerSize.MEDIUM} />\n </section>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n {...this.inputAttributes}\n onChange={() => this.fileInputHandler()}\n accept={this.acceptedFormat}\n ref={(val) => (this.input = val)}\n />\n );\n }\n\n private renderUploadButton(): unknown[] {\n return [\n this.renderInput(),\n <z-button\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" || e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n id=\"fileSelect\"\n variant={this.buttonVariant}\n icon=\"upload\"\n ref={(val) => (this.button = val)}\n >\n {this.uploadBtnLabel}\n </z-button>,\n ];\n }\n\n private renderUploadLink(): unknown[] {\n return [\n this.renderInput(),\n <span class=\"body-1 upload-link-text\">\n Trascina o{\" \"}\n <span\n tabIndex={0}\n class=\"body-1-sb upload-link\"\n onClick={() => this.input.click()}\n onKeyPress={(e) => {\n if (e.code == \"Space\" || e.code == \"Enter\") {\n e.preventDefault();\n this.input.click();\n }\n }}\n ref={(val) => (this.uploadLink = val)}\n >\n carica\n </span>{\" \"}\n dal tuo computer\n </span>,\n ];\n }\n\n private renderDefaultMode(): unknown[] {\n return [\n this.renderDescription(\"body-3-sb\"),\n this.renderAllowedFileExtensions(),\n this.renderFileSection(),\n this.renderUploadButton(),\n ];\n }\n\n private renderDragDropMode(): unknown[] {\n return [\n this.renderFileSection(),\n <z-dragdrop-area drag-and-drop-label={this.dragAndDropLabel}>\n <div class=\"text-container\">\n {this.renderDescription(\"body-1\")}\n {this.renderUploadLink()}\n {this.renderAllowedFileExtensions()}\n </div>\n </z-dragdrop-area>,\n ];\n }\n\n private formatErrorString(key, value): string {\n const bothErrors = value[0] && value[1] ? \" e \" : \"\";\n\n return (\n <span class=\"error-message\">\n Il file <span class=\"file-name\">{key}</span> {value[1] ?? \"\"}\n {bothErrors}\n {value[0] ?? \"\"}.\n </span>\n );\n }\n\n private handleErrorModalContent(): HTMLDivElement {\n return (\n <div slot=\"modalContent\">\n <div class=\"modal-wrapper\">\n <div class=\"files\">\n {Array.from(this.invalidFiles).map(([key, value]) => {\n return <span class=\"body-3\">{this.formatErrorString(key, value)}</span>;\n })}\n </div>\n </div>\n </div>\n );\n }\n\n render(): HTMLZFileUploadElement {\n return (\n <Host>\n <div\n tabIndex={0}\n class={`container ${this.getType()}`}\n >\n {this.mainTitle && this.renderTitle()}\n {this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n </div>\n {!!this.invalidFiles.size && (\n <z-modal\n modalid={`file-upload-${this.type}-error-modal`}\n tabIndex={0}\n ref={(val) => (this.errorModal = val)}\n modaltitle=\"Errore di caricamento\"\n onModalClose={() => (this.invalidFiles = new Map<string, string[]>())}\n onModalBackgroundClick={() => (this.invalidFiles = new Map<string, string[]>())}\n >\n {this.handleErrorModalContent()}\n </z-modal>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/web-components-library/p-410ec9a2.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as i,h as a}from"./p-10bb4f4b.js";import{f as e}from"./p-025f494e.js";const n=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";const r=n;const s=class{constructor(a){t(this,a);this.otpChange=i(this,"otpChange",7);this.inputNum=6;this.status=undefined;this.message=undefined}emitInputChange(t){this.otpChange.emit({value:t})}componentWillLoad(){this.otp=[...Array(this.inputNum)];this.otpRef=[...Array(this.inputNum)]}render(){return a("div",{key:"d43a7825cc988d029a8f3907a2d6b4241ffe649e",class:"otp-container"},a("div",{key:"e70cd5ac9baa4264995fbb529e86759a6fb2a239",class:"digits-container"},this.otp.map(((t,i)=>a("input",{class:this.status==e.ERROR?"error":null,onKeyDown:t=>{if(t.keyCode>47){this.otpRef[i].value=""}},onKeyUp:t=>{if(t.keyCode>47){i<this.inputNum-1&&this.otpRef[i+1].focus()}},onInput:t=>{this.otp[i]=t.target.value;this.emitInputChange(this.otp.join(""))},type:"text",minlength:"1",maxlength:"1",autoComplete:"off",ref:t=>this.otpRef[i]=t})))),a("z-input-message",{key:"f0b2b27c8936059f3aa0d9ca4d207a4b61297e2d",message:this.message,status:this.status}))}};s.style=r;export{s as z_otp};
2	- //# sourceMappingURL=p-410ec9a2.entry.js.map

package/dist/web-components-library/p-410ec9a2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZOtpStyle0","ZOtp","emitInputChange","value","this","otpChange","emit","componentWillLoad","otp","Array","inputNum","otpRef","render","h","key","class","map","_val","i","status","InputStatus","ERROR","onKeyDown","e","keyCode","onKeyUp","focus","onInput","target","join","type","minlength","maxlength","autoComplete","ref","el","message"],"sources":["src/snowflakes/myz/z-otp/styles.css?tag=z-otp&encapsulation=shadow","src/snowflakes/myz/z-otp/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.digits-container {\n display: flex;\n justify-content: flex-start;\n}\n\ninput {\n width: calc(var(--space-unit) * 5);\n height: 72px;\n box-sizing: border-box;\n padding: 0;\n caret-color: transparent;\n color: var(--color-surface05);\n font-family: var(--font-family-sans);\n font-size: 32px;\n font-weight: 300;\n text-align: center;\n}\n\ninput.error {\n border: 1px solid;\n border-color: var(--color-error01);\n background-color: var(--color-error-inverse);\n border-radius: 4px;\n}\n\ninput:not(:last-of-type) {\n margin-right: var(--space-unit);\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n input:not(:last-of-type) {\n margin-right: calc(var(--space-unit) * 2);\n }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1025px) {\n input {\n width: calc(var(--space-unit) * 6);\n }\n}\n","import {Component, h, Event, EventEmitter, Prop} from \"@stencil/core\";\nimport {InputStatus} from \"../../../beans\";\n\n@Component({\n tag: \"z-otp\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZOtp {\n /** Input number */\n @Prop()\n inputNum?: number = 6;\n\n /** Input status */\n @Prop()\n status?: InputStatus;\n\n /** Input message */\n @Prop()\n message?: string;\n\n private otp: string[];\n\n private otpRef: HTMLInputElement[];\n\n /** Otp change event */\n @Event()\n otpChange: EventEmitter;\n\n private emitInputChange(value: string): void {\n this.otpChange.emit({value});\n }\n\n componentWillLoad(): void {\n this.otp = [...Array(this.inputNum)];\n this.otpRef = [...Array(this.inputNum)];\n }\n\n render(): HTMLDivElement {\n return (\n <div class=\"otp-container\">\n <div class=\"digits-container\">\n {this.otp.map((_val, i) => (\n <input\n class={this.status == InputStatus.ERROR ? \"error\" : null}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.keyCode > 47) {\n this.otpRef[i].value = \"\";\n }\n }}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.keyCode > 47) {\n i < this.inputNum - 1 && this.otpRef[i + 1].focus();\n }\n }}\n onInput={(e: InputEvent) => {\n this.otp[i] = (e.target as HTMLInputElement).value;\n this.emitInputChange(this.otp.join(\"\"));\n }}\n type=\"text\"\n minlength=\"1\"\n maxlength=\"1\"\n autoComplete=\"off\"\n ref={(el) => (this.otpRef[i] = el)}\n />\n ))}\n </div>\n <z-input-message\n message={this.message}\n status={this.status}\n ></z-input-message>\n </div>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,stBAClB,MAAAC,EAAeD,E,MCOFE,EAAI,M,4EAGK,E,6CAkBZ,eAAAC,CAAgBC,GACtBC,KAAKC,UAAUC,KAAK,CAACH,S,CAGvB,iBAAAI,GACEH,KAAKI,IAAM,IAAIC,MAAML,KAAKM,WAC1BN,KAAKO,OAAS,IAAIF,MAAML,KAAKM,U,CAG/B,MAAAE,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACRX,KAAKI,IAAIQ,KAAI,CAACC,EAAMC,IACnBL,EAAA,SACEE,MAAOX,KAAKe,QAAUC,EAAYC,MAAQ,QAAU,KACpDC,UAAYC,IACV,GAAIA,EAAEC,QAAU,GAAI,CAClBpB,KAAKO,OAAOO,GAAGf,MAAQ,E,GAG3BsB,QAAUF,IACR,GAAIA,EAAEC,QAAU,GAAI,CAClBN,EAAId,KAAKM,SAAW,GAAKN,KAAKO,OAAOO,EAAI,GAAGQ,O,GAGhDC,QAAUJ,IACRnB,KAAKI,IAAIU,GAAMK,EAAEK,OAA4BzB,MAC7CC,KAAKF,gBAAgBE,KAAKI,IAAIqB,KAAK,IAAI,EAEzCC,KAAK,OACLC,UAAU,IACVC,UAAU,IACVC,aAAa,MACbC,IAAMC,GAAQ/B,KAAKO,OAAOO,GAAKiB,OAIrCtB,EAAA,mBAAAC,IAAA,2CACEsB,QAAShC,KAAKgC,QACdjB,OAAQf,KAAKe,S"}

package/dist/web-components-library/p-414c9659.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export{Z as z_tbody}from"./p-6398da61.js";import"./p-10bb4f4b.js";
2	- //# sourceMappingURL=p-414c9659.entry.js.map

package/dist/web-components-library/p-414c9659.entry.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"names":[],"sources":[],"mappings":""}

package/dist/web-components-library/p-4574595b.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,h as n}from"./p-10bb4f4b.js";const i=".sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}";const a=i;const t=class{constructor(n){e(this,n);this.elemid=undefined;this.imgurl=undefined;this.imgalt=undefined;this.linkicon=undefined;this.linklabel=undefined;this.url=undefined;this.target="_blank";this.isdisabled=false;this.descrSlotName=undefined}render(){const e=this.elemid?this.elemid:"";return n("div",{key:"91a143d46fe8e4a3577180d6e4402f688b234110",class:"panel-elem-container"},(this.imgurl\|\|this.imgalt)&&n("div",{"aria-hidden":"true",class:"panel-elem-icon"},n("img",{src:this.imgurl,alt:this.imgalt})),n("div",{key:"86758f350858a9d7541c04f97b28380172fd9ae1",class:"panel-elem-link"},n("a",{key:"11bc0af0c410e5fa21148508abefa95c4b92c5db",class:{"z-link":true,"z-link-disabled":this.isdisabled,"z-link-icon":true},id:e+"link_id",href:this.url,target:this.target},n("z-icon",{key:"166a449dea58e874d07fa86631692ff5dc14c7cc",height:14,width:14,name:this.linkicon}),this.linklabel)),this.descrSlotName&&n("div",{class:"panel-elem-desc"},n("slot",{name:this.descrSlotName})))}};t.style=a;export{t as z_panel_elem};
2	- //# sourceMappingURL=p-4574595b.entry.js.map

package/dist/web-components-library/p-4574595b.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZPanelElemStyle0","ZPanelElem","render","elemId","this","elemid","h","key","class","imgurl","imgalt","src","alt","isdisabled","id","href","url","target","height","width","name","linkicon","linklabel","descrSlotName"],"sources":["src/components/panel/z-panel-elem/styles.css?tag=z-panel-elem&encapsulation=scoped","src/components/panel/z-panel-elem/index.tsx"],"sourcesContent":[":host {\n width: inherit;\n font-family: var(--font-family sans);\n font-weight: var(--font-rg);\n}\n\n.panel-elem-container {\n width: 100%;\n}\n\n.panel-elem-icon {\n margin: auto calc(var(--space-unit) * 3);\n}\n\n.panel-elem-icon img {\n display: block;\n max-width: 96px;\n height: 32px;\n margin: auto;\n object-fit: contain;\n}\n\n.panel-elem-link {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: var(--space-unit) auto 0;\n border-radius: var(--border-no-radius);\n font-size: 12px;\n}\n\n.panel-elem-link > a.z-link {\n padding: calc(var(--space-unit) * 0.5) 0;\n font-weight: var(--font-sb);\n}\n\n.panel-elem-desc {\n padding-top: var(--space-unit);\n margin: 0;\n letter-spacing: 0.16px;\n text-align: center;\n}\n\na > z-icon {\n margin-right: var(--space-unit);\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot `descrSlotName` - description content\n */\n@Component({\n tag: \"z-panel-elem\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZPanelElem {\n /** html element id (optional) */\n @Prop()\n elemid?: string;\n\n /** image url source (optional) */\n @Prop()\n imgurl?: string;\n\n /** alternative image text (optional) */\n @Prop()\n imgalt?: string;\n\n /** icon link name (optional) */\n @Prop()\n linkicon?: string;\n\n /** link label text*/\n @Prop()\n linklabel: string;\n\n /** link url */\n @Prop()\n url: string;\n\n /** link target (optional) */\n @Prop()\n target?: string = \"_blank\";\n\n /** disabled status flag (optional) */\n @Prop()\n isdisabled?: boolean = false;\n\n /** name of slot container (optional) */\n @Prop()\n descrSlotName?: string;\n\n render(): HTMLDivElement {\n const elemId = this.elemid ? this.elemid : \"\";\n\n return (\n <div class=\"panel-elem-container\">\n {(this.imgurl || this.imgalt) && (\n <div\n aria-hidden=\"true\"\n class=\"panel-elem-icon\"\n >\n <img\n src={this.imgurl}\n alt={this.imgalt}\n />\n </div>\n )}\n <div class=\"panel-elem-link\">\n <a\n class={{\n \"z-link\": true,\n \"z-link-disabled\": this.isdisabled,\n \"z-link-icon\": true,\n }}\n id={elemId + \"link_id\"}\n href={this.url}\n target={this.target}\n >\n <z-icon\n height={14}\n width={14}\n name={this.linkicon}\n ></z-icon>\n {this.linklabel}\n </a>\n </div>\n {this.descrSlotName && (\n <div class=\"panel-elem-desc\">\n <slot name={this.descrSlotName} />\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,4zBAClB,MAAAC,EAAeD,E,MCUFE,EAAU,M,2KA2BH,S,gBAIK,M,6BAMvB,MAAAC,GACE,MAAMC,EAASC,KAAKC,OAASD,KAAKC,OAAS,GAE3C,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yBACPJ,KAAKK,QAAUL,KAAKM,SACpBJ,EAAA,qBACc,OACZE,MAAM,mBAENF,EAAA,OACEK,IAAKP,KAAKK,OACVG,IAAKR,KAAKM,UAIhBJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,KAAAC,IAAA,2CACEC,MAAO,CACL,SAAU,KACV,kBAAmBJ,KAAKS,WACxB,cAAe,MAEjBC,GAAIX,EAAS,UACbY,KAAMX,KAAKY,IACXC,OAAQb,KAAKa,QAEbX,EAAA,UAAAC,IAAA,2CACEW,OAAQ,GACRC,MAAO,GACPC,KAAMhB,KAAKiB,WAEZjB,KAAKkB,YAGTlB,KAAKmB,eACJjB,EAAA,OAAKE,MAAM,mBACTF,EAAA,QAAMc,KAAMhB,KAAKmB,iB"}

package/dist/web-components-library/p-45d7e54e.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,h as o}from"./p-10bb4f4b.js";import{P as t}from"./p-025f494e.js";const r=":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-default-text);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";const s=r;const a=class{constructor(o){e(this,o);this.position=t.AUTO;this.dark=false;this.open=false;this.bindTo=undefined;this.closable=true}onPopoverOpenChange(){this.open=this.popoverEl.open}render(){return o("z-popover",{key:"9f666fd17b7051e4ab7a766c46887c7e41579052",ref:e=>this.popoverEl=e,bindTo:this.bindTo,open:this.open,position:this.position,closable:this.closable,center:true,showArrow:true},o("slot",{key:"e50d24a8bebabcc40645baf2afd6cafb396b520a"}))}};a.style=s;export{a as z_tooltip};
2	- //# sourceMappingURL=p-45d7e54e.entry.js.map

package/dist/web-components-library/p-45d7e54e.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZTooltipStyle0","ZTooltip","PopoverPosition","AUTO","onPopoverOpenChange","this","open","popoverEl","render","h","key","ref","el","bindTo","position","closable","center","showArrow"],"sources":["src/components/notification/z-tooltip/styles.css?tag=z-tooltip&encapsulation=shadow","src/components/notification/z-tooltip/index.tsx"],"sourcesContent":[":host {\n --z-tooltip-theme--surface: var(--color-surface01);\n --z-tooltip-theme--text: var(--color-default-text);\n --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));\n}\n\n:host([dark]) z-popover {\n --z-popover-theme--surface: var(--color-surface05);\n --z-popover-theme--text: var(--color-text-inverse);\n}\n\nz-popover {\n --z-popover-padding: var(--space-unit);\n --z-popover-theme--surface: var(--z-tooltip-theme--surface);\n --z-popover-theme--text: var(--z-tooltip-theme--text);\n --z-popover-shadow-filter: var(--z-tooltip-shadow-filter);\n}\n","import {Component, Prop, h, Listen} from \"@stencil/core\";\nimport {PopoverPosition} from \"../../../beans\";\n\n/**\n * Tooltip component.\n * It is basically a wrapper for the `<z-popover>` component with custom configuration.\n *\n * @cssprop --z-tooltip-theme--surface - background color of the popover.\n * @cssprop --z-tooltip-theme--text - foreground color of the popover.\n * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.\n */\n@Component({\n tag: \"z-tooltip\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTooltip {\n /** Tooltip position. */\n @Prop({reflect: true})\n position: PopoverPosition = PopoverPosition.AUTO;\n\n /** Enable tooltip dark mode. */\n @Prop({reflect: true})\n dark = false;\n\n /**\n * The open state of the tooltip.\n */\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /**\n * The selector or the element bound with the tooltip.\n */\n @Prop()\n bindTo?: string | HTMLElement;\n\n /**\n * Reflects `closable` prop of the popover.\n * \"If true, the popover can be closed by clicking outside of it or pressing the escape key.\n * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\"\n */\n @Prop()\n closable = true;\n\n private popoverEl: HTMLZPopoverElement;\n\n @Listen(\"openChange\")\n onPopoverOpenChange(): void {\n this.open = this.popoverEl.open;\n }\n\n render(): HTMLZPopoverElement {\n return (\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.bindTo}\n open={this.open}\n position={this.position}\n closable={this.closable}\n center\n showArrow\n >\n <slot></slot>\n </z-popover>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,4gBAClB,MAAAC,EAAeD,E,MCeFE,EAAQ,M,uCAGSC,EAAgBC,K,UAIrC,M,UAMA,M,oCAcI,I,CAKX,mBAAAC,GACEC,KAAKC,KAAOD,KAAKE,UAAUD,I,CAG7B,MAAAE,GACE,OACEC,EAAA,aAAAC,IAAA,2CACEC,IAAMC,GAAQP,KAAKE,UAAYK,EAC/BC,OAAQR,KAAKQ,OACbP,KAAMD,KAAKC,KACXQ,SAAUT,KAAKS,SACfC,SAAUV,KAAKU,SACfC,OAAM,KACNC,UAAS,MAETR,EAAA,QAAAC,IAAA,6C"}

package/dist/web-components-library/p-48c16e8f.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as o,h as e,a as s}from"./p-10bb4f4b.js";const r=":host{--z-table--cells-bottom-border-size:var(\n --border-size-medium\n );--z-table--cells-background:var(\n --color-surface02\n );display:block;box-sizing:border-box}:host([sticky]){position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px var(--shadow-color-base)}";const c=r;const a=class{constructor(e){o(this,e);this.sticky=false}render(){return e(s,{key:"fd1e0dced377fcfcd3b531c063ac36937eaf6904",role:"rowgroup"},e("slot",{key:"1d75abf2f9b0f1c109eec083ebfaf3e07de81dca"}))}};a.style=c;export{a as Z};
2	- //# sourceMappingURL=p-48c16e8f.js.map

package/dist/web-components-library/p-48c16e8f.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZTheadStyle0","ZThead","render","h","Host","key","role"],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n --z-table--cells-bottom-border-size: var(\n --border-size-medium\n ); /* Needed to handle the border of the expand button cell */\n\n --z-table--cells-background: var(\n --color-surface02\n ); /* Needed to handle the background-color of the expand button cell */\n\n display: block;\n box-sizing: border-box;\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 2;\n top: 0;\n box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n tag: \"z-thead\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZThead {\n /**\n * If true, the header will be stuck to the top of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): HTMLZTheadElement {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,qRAClB,MAAAC,EAAeD,E,MCUFE,EAAM,M,qCAKR,K,CAET,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C"}

package/dist/web-components-library/p-4bc0818d.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as o,h as r,a as s}from"./p-10bb4f4b.js";const c=":host{display:block;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}";const t=c;const b=class{constructor(r){o(this,r);this.sticky=false}render(){return r(s,{key:"441a3e0656da274193c4a12681b9e9d641690982",role:"rowgroup"},r("slot",{key:"5e80207cbf1238b2141fcd657cb10fc18be7bccb"}))}};b.style=t;export{b as Z};
2	- //# sourceMappingURL=p-4bc0818d.js.map

package/dist/web-components-library/p-4bc0818d.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZTfootStyle0","ZTfoot","render","h","Host","key","role"],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n border-top: 1px solid var(--color-surface03);\n border-bottom: 1px solid var(--color-surface03);\n}\n\n:host([sticky]) {\n position: sticky;\n z-index: 1;\n bottom: 0;\n background-color: var(--color-surface01);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n tag: \"z-tfoot\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTfoot {\n /**\n * If true, the footer will be stuck to the bottom of the table.\n */\n @Prop({reflect: true})\n sticky = false;\n\n render(): void {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,mOAClB,MAAAC,EAAeD,E,MCUFE,EAAM,M,qCAKR,K,CAET,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C"}

package/dist/web-components-library/p-4d2be9e5.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r,h as a,a as e}from"./p-10bb4f4b.js";const o=':host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--color-surface02);border-radius:var(--border-radius);transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(\n 90deg,\n var(--color-surface02) 0%,\n var(--color-surface03) 95%,\n var(--color-surface02) 100%\n );content:"";filter:blur(6px)}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}';const s=o;const t=class{constructor(a){r(this,a)}render(){return a(e,{key:"8738533f14d7ef5917825e6632b63e995a410d24"})}};t.style=s;export{t as z_ghost_loading};
2	- //# sourceMappingURL=p-4d2be9e5.entry.js.map

package/dist/web-components-library/p-4d2be9e5.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZGhostLoadingStyle0","ZGhostLoading","render","h","Host","key"],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n background: var(--color-surface02);\n border-radius: var(--border-radius);\n transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n display: block;\n width: 100%;\n height: 100%;\n animation: progress 1.6s ease-in-out infinite;\n background-image: linear-gradient(\n 90deg,\n var(--color-surface02) 0%,\n var(--color-surface03) 95%,\n var(--color-surface02) 100%\n );\n content: \"\";\n filter: blur(6px);\n}\n\n@keyframes progress {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(100%);\n }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n@Component({\n tag: \"z-ghost-loading\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZGhostLoading {\n render(): HTMLZGhostLoadingElement {\n return <Host />;\n }\n}\n"],"mappings":"6CAAA,MAAMA,EAAY,6gBAClB,MAAAC,EAAeD,E,MCKFE,EAAa,M,yBACxB,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,4C"}

package/dist/web-components-library/p-4d2e328d.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as o,c as t,h as i}from"./p-10bb4f4b.js";const r=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;padding:calc(var(--space-unit) * 2);background:var(--color-primary03);border-radius:var(--border-radius)}:host>div>slot{color:var(--color-default-text);font-size:14px}:host>div>z-icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-primary01)}";const a=r;const s=class{constructor(i){o(this,i);this.infoBoxClose=t(this,"infoBoxClose",7);this.boxid=undefined;this.isclosable=true}emitInfoBoxClose(){this.infoBoxClose.emit({boxid:this.boxid})}render(){return i("div",{key:"ca557ef255dac8cd5e349193e1a737ebbbc89e67",id:this.boxid},i("slot",{key:"1be32b81bde96ac8f548a4bd84698ddbbc2485f1",name:"content"}),this.isclosable&&i("z-icon",{name:"multiply","data-action":"infoBoxClose",onClick:()=>this.emitInfoBoxClose()}))}};s.style=a;export{s as z_info_box};
2	- //# sourceMappingURL=p-4d2e328d.entry.js.map

package/dist/web-components-library/p-4d2e328d.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZInfoBoxStyle0","ZInfoBox","emitInfoBoxClose","this","infoBoxClose","emit","boxid","render","h","key","id","name","isclosable","onClick"],"sources":["src/components/notification/z-info-box/styles.css?tag=z-info-box&encapsulation=shadow","src/components/notification/z-info-box/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > div {\n display: flex;\n width: inherit;\n padding: calc(var(--space-unit) * 2);\n background: var(--color-primary03);\n border-radius: var(--border-radius);\n}\n\n:host > div > slot {\n color: var(--color-default-text);\n font-size: 14px;\n}\n\n:host > div > z-icon {\n margin-left: calc(var(--space-unit) * 2);\n cursor: pointer;\n fill: var(--color-primary01);\n}\n","import {Component, Prop, h, Event, EventEmitter} from \"@stencil/core\";\n\n/**\n * @slot content - set the info box content\n */\n@Component({\n tag: \"z-info-box\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZInfoBox {\n /** info box unique id */\n @Prop()\n boxid: string;\n\n /** render close icon flag */\n @Prop()\n isclosable = true;\n\n /** emitted on close icon click */\n @Event()\n infoBoxClose: EventEmitter;\n\n private emitInfoBoxClose(): void {\n this.infoBoxClose.emit({boxid: this.boxid});\n }\n\n render(): HTMLDivElement {\n return (\n <div id={this.boxid}>\n <slot name=\"content\" />\n {this.isclosable && (\n <z-icon\n name=\"multiply\"\n data-action=\"infoBoxClose\"\n onClick={() => this.emitInfoBoxClose()}\n />\n )}\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,wXAClB,MAAAC,EAAeD,E,MCSFE,EAAQ,M,yGAON,I,CAML,gBAAAC,GACNC,KAAKC,aAAaC,KAAK,CAACC,MAAOH,KAAKG,O,CAGtC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,GAAIP,KAAKG,OACZE,EAAA,QAAAC,IAAA,2CAAME,KAAK,YACVR,KAAKS,YACJJ,EAAA,UACEG,KAAK,WAAU,cACH,eACZE,QAAS,IAAMV,KAAKD,qB"}

package/dist/web-components-library/p-4dd8d4e8.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as s,a as c}from"./p-10bb4f4b.js";import{r as i}from"./p-955da62e.js";import{k as a}from"./p-025f494e.js";import"./p-2c886e8b.js";const l='.sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-default-text);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type="checkbox"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}';const o=l;const r=class{constructor(s){e(this,s);this.toggleClick=t(this,"toggleClick",7);this.disabled=false;this.labelPosition=a.LEFT;this.checked=false;this.htmlid=`toggle-switch-id-${i()}`}emitToggleClick(){this.toggleClick.emit({id:this.htmlid,checked:this.checked})}handleClick(e){if(this.disabled){return}this.checked=e.target.checked;this.emitToggleClick()}render(){return s(c,{key:"1fcac74eda8db17b3d535d2138ee9637ef7779b5"},s("input",{key:"90d27860c20def96928eb87c9df301d9df1226c0",id:this.htmlid,type:"checkbox",checked:this.checked,disabled:this.disabled,onChange:this.handleClick.bind(this)}),s("label",{key:"be5a0eec29f493ac91c2fafbba54afcfa8f50f50",htmlFor:this.htmlid,class:{[this.labelPosition]:true,disabled:this.disabled}},s("span",{key:"b336633b42383d0aef29ec775e3b18aca42bf096"},s("slot",{key:"9f8d563f0bae08144106f32c1018cbd40b6b5bc6"})),s("span",{key:"176481146a6df0f575fc364fabd2dc2ea1b00b54",class:{container:true,disabled:this.disabled,checked:this.checked}},s("span",{key:"8a1227658fb1fdc68523a3947c7b8f55b63baa89",class:"circle"},this.checked&&s("z-icon",{width:12,height:12,name:"checkmark"})))))}};r.style=o;export{r as z_toggle_switch};
2	- //# sourceMappingURL=p-4dd8d4e8.entry.js.map

package/dist/web-components-library/p-4dd8d4e8.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZToggleSwitchStyle0","ZToggleSwitch","LabelPosition","LEFT","randomId","emitToggleClick","this","toggleClick","emit","id","htmlid","checked","handleClick","ev","disabled","target","render","h","Host","key","type","onChange","bind","htmlFor","class","labelPosition","container","width","height","name"],"sources":["src/components/buttons/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/buttons/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: inline-flex;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\nlabel {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n}\n\nlabel.disabled {\n cursor: default;\n}\n\nlabel.right {\n flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n color: var(--color-default-text);\n letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n position: relative;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 4);\n height: 18px;\n align-items: center;\n background-color: var(--gray500);\n border-radius: var(--space-unit);\n color: var(--gray500);\n cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n background-color: var(--color-disabled01);\n cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n background-color: var(--color-primary01);\n fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n background-color: var(--color-hover-primary);\n fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n position: absolute;\n top: 1px;\n left: 1px;\n display: flex;\n width: calc(var(--space-unit) * 2);\n height: calc(var(--space-unit) * 2);\n align-items: center;\n justify-content: center;\n margin: 0;\n background-color: var(--color-white);\n border-radius: 7px;\n box-shadow: var(--shadow-1);\n transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n position: absolute;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport {LabelPosition} from \"../../../beans\";\n\n@Component({\n tag: \"z-toggle-switch\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZToggleSwitch {\n /** Disabled flag */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** Label position */\n @Prop({reflect: true})\n labelPosition? = LabelPosition.LEFT;\n\n /** Checked state */\n @Prop({mutable: true})\n checked?: boolean = false;\n\n /** HTML id attribute to set to the internal checkbox */\n @Prop()\n htmlid = `toggle-switch-id-${randomId()}`;\n\n /** Toggle click event */\n @Event()\n toggleClick: EventEmitter;\n\n private emitToggleClick(): void {\n this.toggleClick.emit({\n id: this.htmlid,\n checked: this.checked,\n });\n }\n\n private handleClick(ev): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = ev.target.checked;\n this.emitToggleClick();\n }\n\n render(): HTMLZToggleSwitchElement {\n return (\n <Host>\n <input\n id={this.htmlid}\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n onChange={this.handleClick.bind(this)}\n />\n <label\n htmlFor={this.htmlid}\n class={{\n [this.labelPosition]: true,\n disabled: this.disabled,\n }}\n >\n <span>\n <slot />\n </span>\n <span\n class={{\n container: true,\n disabled: this.disabled,\n checked: this.checked,\n }}\n >\n <span class=\"circle\">\n {this.checked && (\n <z-icon\n width={12}\n height={12}\n name=\"checkmark\"\n ></z-icon>\n )}\n </span>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"mappings":"yJAAA,MAAMA,EAAY,05EAClB,MAAAC,EAAeD,E,MCSFE,EAAa,M,gFAGH,M,mBAIJC,EAAcC,K,aAIX,M,YAIX,oBAAoBC,K,CAMrB,eAAAC,GACNC,KAAKC,YAAYC,KAAK,CACpBC,GAAIH,KAAKI,OACTC,QAASL,KAAKK,S,CAIV,WAAAC,CAAYC,GAClB,GAAIP,KAAKQ,SAAU,CACjB,M,CAGFR,KAAKK,QAAUE,EAAGE,OAAOJ,QACzBL,KAAKD,iB,CAGP,MAAAW,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CACEV,GAAIH,KAAKI,OACTU,KAAK,WACLT,QAASL,KAAKK,QACdG,SAAUR,KAAKQ,SACfO,SAAUf,KAAKM,YAAYU,KAAKhB,QAElCW,EAAA,SAAAE,IAAA,2CACEI,QAASjB,KAAKI,OACdc,MAAO,CACL,CAAClB,KAAKmB,eAAgB,KACtBX,SAAUR,KAAKQ,WAGjBG,EAAA,QAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CACEK,MAAO,CACLE,UAAW,KACXZ,SAAUR,KAAKQ,SACfH,QAASL,KAAKK,UAGhBM,EAAA,QAAAE,IAAA,2CAAMK,MAAM,UACTlB,KAAKK,SACJM,EAAA,UACEU,MAAO,GACPC,OAAQ,GACRC,KAAK,iB"}

package/dist/web-components-library/p-5441ba83.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as o,h as e}from"./p-10bb4f4b.js";import{q as r}from"./p-025f494e.js";const t=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{color:var(--color-primary01);fill:var(--color-primary01);font-size:12px;font-weight:var(--font-sb)}:host>z-pocket>z-pocket-header span.badge{display:inline-block;padding:0 calc(var(--space-unit) * 0.5);margin-left:var(--space-unit);background:var(--color-secondary02);border-radius:50%;color:var(--color-surface01)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;padding:var(--space-unit);margin:0 var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgb(255 0 0 / 0%), white)}:host>z-pocket.open>z-pocket-body>div.body{overflow:auto;max-height:calc(100vh - 166px);scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-color:var(--color-primary01) var(--color-surface03);scrollbar-width:thin}:host ::-webkit-scrollbar{width:10px;background:linear-gradient(\n 90deg,\n var(--color-surface01) 2px,\n var(--color-surface03) 4px,\n var(--color-surface01) 8px\n );border-radius:var(--border-radius)}:host ::-webkit-scrollbar-thumb{width:var(--space-unit);background-color:var(--color-primary01);border-radius:var(--border-radius)}}";const a=t;const i=class{constructor(e){o(this,e);this.pocketid=undefined;this.messages=undefined;this.status=r.PREVIEW}handlePocketToggle(o){if(o.detail.id===this.pocketid){this.status=o.detail.status}}renderHeader(){let o;let t;switch(this.status){case r.PREVIEW:case r.CLOSED:o=e("span",null,"Messaggi ",e("span",{class:"badge"},this.messages));t="chevron-up";break;case r.OPEN:o=e("span",null,"Riduci");t="chevron-down";break}return e("z-pocket-header",{pocketid:this.pocketid},o,e("z-icon",{name:t,width:14,height:14}))}renderBody(){return e("z-pocket-body",{pocketid:this.pocketid},e("div",{class:"body"},e("slot",null)),e("div",{class:"gradient"}))}render(){return e("z-pocket",{key:"2f8a4cab129678f4a14c8fe5605c20098d29427a",pocketid:this.pocketid,status:this.status,class:this.status},this.renderHeader(),this.renderBody())}};i.style=a;export{i as z_messages_pocket};
2	- //# sourceMappingURL=p-5441ba83.entry.js.map

package/dist/web-components-library/p-5441ba83.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stylesCss","ZMessagesPocketStyle0","ZMessagesPocket","PocketStatus","PREVIEW","handlePocketToggle","e","detail","id","this","pocketid","status","renderHeader","message","icon","CLOSED","h","class","messages","OPEN","name","width","height","renderBody","render","key"],"sources":["src/snowflakes/myz/pocket/z-messages-pocket/styles.css?tag=z-messages-pocket&encapsulation=shadow","src/snowflakes/myz/pocket/z-messages-pocket/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host > z-pocket {\n width: 100%;\n}\n\n:host > z-pocket.closed {\n width: 158px;\n}\n\n:host > z-pocket > z-pocket-header {\n color: var(--color-primary01);\n fill: var(--color-primary01);\n font-size: 12px;\n font-weight: var(--font-sb);\n}\n\n:host > z-pocket > z-pocket-header span.badge {\n display: inline-block;\n padding: 0 calc(var(--space-unit) * 0.5);\n margin-left: var(--space-unit);\n background: var(--color-secondary02);\n border-radius: 50%;\n color: var(--color-surface01);\n}\n\n:host > z-pocket > z-pocket-header > z-icon {\n margin-left: var(--space-unit);\n}\n\n:host > z-pocket > z-pocket-body > div.body {\n overflow: hidden;\n padding: var(--space-unit);\n margin: 0 var(--space-unit);\n}\n\n:host > z-pocket.preview > z-pocket-body {\n position: relative;\n}\n\n:host > z-pocket.preview > z-pocket-body > div.gradient {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-image: linear-gradient(rgb(255 0 0 / 0%), white);\n}\n\n:host > z-pocket.open > z-pocket-body > div.body {\n overflow: auto;\n max-height: calc(100vh - 166px);\n scrollbar-width: none;\n}\n\n:host ::-webkit-scrollbar {\n width: 0;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n :host > z-pocket {\n width: 768px;\n margin: 0 calc((100% - 768px) / 2);\n }\n\n :host > z-pocket.closed {\n margin: 0 calc((100% - 158px) / 2);\n }\n\n :host > z-pocket.open > z-pocket-body > div.body {\n max-height: 326px;\n }\n}\n\n/* Desktop breakpoint */\n@media only screen and (min-width: 1152px) {\n :host > z-pocket.open > z-pocket-body > div.body {\n scrollbar-color: var(--color-primary01) var(--color-surface03);\n scrollbar-width: thin;\n }\n\n :host ::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(\n 90deg,\n var(--color-surface01) 2px,\n var(--color-surface03) 4px,\n var(--color-surface01) 8px\n );\n border-radius: var(--border-radius);\n }\n\n :host ::-webkit-scrollbar-thumb {\n width: var(--space-unit);\n background-color: var(--color-primary01);\n border-radius: var(--border-radius);\n }\n}\n","import {Component, Prop, h, Listen /* , State */} from \"@stencil/core\";\nimport {PocketStatus} from \"../../../../beans\";\n\n/**\n * @slot - pocket body content\n */\n@Component({\n tag: \"z-messages-pocket\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMessagesPocket {\n /** pocket id */\n @Prop()\n pocketid: string;\n\n /** number of messages */\n @Prop()\n messages: number;\n\n /** pocket status */\n @Prop({mutable: true})\n status: PocketStatus = PocketStatus.PREVIEW;\n\n @Listen(\"pocketToggle\", {target: \"body\"})\n handlePocketToggle(e: CustomEvent): void {\n if (e.detail.id === this.pocketid) {\n this.status = e.detail.status;\n }\n }\n\n private renderHeader(): HTMLZPocketHeaderElement {\n let message: HTMLElement;\n let icon: string;\n switch (this.status) {\n case PocketStatus.PREVIEW:\n case PocketStatus.CLOSED:\n message = (\n <span>\n Messaggi <span class=\"badge\">{this.messages}</span>\n </span>\n );\n icon = \"chevron-up\";\n break;\n case PocketStatus.OPEN:\n message = <span>Riduci</span>;\n icon = \"chevron-down\";\n break;\n }\n\n return (\n <z-pocket-header pocketid={this.pocketid}>\n {message}\n <z-icon\n name={icon}\n width={14}\n height={14}\n />\n </z-pocket-header>\n );\n }\n\n private renderBody(): HTMLZPocketBodyElement {\n return (\n <z-pocket-body pocketid={this.pocketid}>\n <div class=\"body\">\n <slot />\n </div>\n <div class=\"gradient\" />\n </z-pocket-body>\n );\n }\n\n render(): HTMLZPocketElement {\n return (\n <z-pocket\n pocketid={this.pocketid}\n status={this.status}\n class={this.status}\n >\n {this.renderHeader()}\n {this.renderBody()}\n </z-pocket>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,0tDAClB,MAAAC,EAAeD,E,MCUFE,EAAe,M,qFAWHC,EAAaC,O,CAGpC,kBAAAC,CAAmBC,GACjB,GAAIA,EAAEC,OAAOC,KAAOC,KAAKC,SAAU,CACjCD,KAAKE,OAASL,EAAEC,OAAOI,M,EAInB,YAAAC,GACN,IAAIC,EACJ,IAAIC,EACJ,OAAQL,KAAKE,QACX,KAAKR,EAAaC,QAClB,KAAKD,EAAaY,OAChBF,EACEG,EAAA,wBACWA,EAAA,QAAMC,MAAM,SAASR,KAAKS,WAGvCJ,EAAO,aACP,MACF,KAAKX,EAAagB,KAChBN,EAAUG,EAAA,sBACVF,EAAO,eACP,MAGJ,OACEE,EAAA,mBAAiBN,SAAUD,KAAKC,UAC7BG,EACDG,EAAA,UACEI,KAAMN,EACNO,MAAO,GACPC,OAAQ,K,CAMR,UAAAC,GACN,OACEP,EAAA,iBAAeN,SAAUD,KAAKC,UAC5BM,EAAA,OAAKC,MAAM,QACTD,EAAA,cAEFA,EAAA,OAAKC,MAAM,a,CAKjB,MAAAO,GACE,OACER,EAAA,YAAAS,IAAA,2CACEf,SAAUD,KAAKC,SACfC,OAAQF,KAAKE,OACbM,MAAOR,KAAKE,QAEXF,KAAKG,eACLH,KAAKc,a"}