npm - @zanichelli/albe-web-components - Versions diffs - 19.3.0-rc1 → 19.3.0 - Mend

@zanichelli/albe-web-components 19.3.0-rc1 → 19.3.0

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

package/dist/collection/components/deprecated/z-app-header-deprecated/styles.css CHANGED Viewed

@@ -1,4 +1,53 @@
 :host {
+  /**
+   * @prop --app-header-typography-1-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
+   * @prop --app-header-typography-2-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
+   * @prop --app-header-typography-3-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
+   * @prop --app-header-typography-4-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
+   * @prop --app-header-typography-5-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
+   * @prop --app-header-typography-6-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
+   * @prop --app-header-typography-7-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
+   * @prop --app-header-typography-8-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
+   * @prop --app-header-typography-9-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
+   * @prop --app-header-typography-10-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
+   * @prop --app-header-typography-11-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
+   * @prop --app-header-typography-12-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
+   * @prop --app-header-typography-1-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
+   * @prop --app-header-typography-2-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
+   * @prop --app-header-typography-3-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+   * @prop --app-header-typography-4-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+   * @prop --app-header-typography-5-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+   * @prop --app-header-typography-6-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
+   * @prop --app-header-typography-7-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+   * @prop --app-header-typography-8-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+   * @prop --app-header-typography-9-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
+   * @prop --app-header-typography-10-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
+   * @prop --app-header-typography-11-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+   * @prop --app-header-typography-12-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
+   * @prop --app-header-typography-1-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
+   * @prop --app-header-typography-2-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
+   * @prop --app-header-typography-3-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
+   * @prop --app-header-typography-4-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
+   * @prop --app-header-typography-5-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
+   * @prop --app-header-typography-6-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
+   * @prop --app-header-typography-7-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
+   * @prop --app-header-typography-8-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
+   * @prop --app-header-typography-9-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
+   * @prop --app-header-typography-10-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
+   * @prop --app-header-typography-11-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
+   * @prop --app-header-typography-12-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
+   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+   * @prop --app-header-height: Defaults to `auto`.
+   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+   * @prop --app-header-drawer-trigger-size: The size of the drawer icon. Defaults to `--space-unit * 4`.
+   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-text-color: Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
+   * @prop --app-header-title-font-size: Variable to customize the title's font size. NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. Defaults to `--app-header-typography-3-size`.
+   * @prop --app-header-title-lineheight: Variable to customize the title's line-height. NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size. Defaults to `--app-header-typography-3-lineheight`.
+   * @prop --app-header-title-letter-spacing: Variable to customize the title's letter-spacing. NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size. Defaults to `--app-header-typography-3-tracking`.
+   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.
+   */
   --app-header-typography-1-size: 24px;
   --app-header-typography-2-size: 28px;
   --app-header-typography-3-size: 32px;

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

@@ -7,10 +7,6 @@ import { randomId } from "../../../utils/utils";
  * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)
  * @slot tags - card tags (extended and search variant only)
  * @slot footer-cta - footer cta button (search and compact variant only)
- * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color
- * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color
- * @cssprop --z-book-card-compact-width - compact card custom width
- * @cssprop --z-book-card-compact-height - compact card custom height
  */
 export class ZBookCardDeprecated {
     constructor() {
@@ -115,7 +111,7 @@ export class ZBookCardDeprecated {
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '09310ad4eac077f69d476ad5bcc941d96df9975d', class: {
+        return (h("article", { key: 'd603afa99fc5bdc0b6cb9ad1b22a309c4962c486', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));
@@ -418,3 +414,4 @@ export class ZBookCardDeprecated {
     }
     static get elementRef() { return "hostElement"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/deprecated/z-book-card-deprecated/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/deprecated/z-book-card-deprecated/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {BookCardDeprecatedVariant} from \"../../../beans\";\nimport {Breakpoints} 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 */\n@Component({\n tag: \"z-book-card-deprecated\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZBookCardDeprecated implements ComponentInterface {\n @Element() hostElement: HTMLZBookCardDeprecatedElement;\n\n /**\n * Card variant: expanded, compact, search\n */\n @Prop()\n variant: BookCardDeprecatedVariant;\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: ${Breakpoints.MOBILE}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 !== BookCardDeprecatedVariant.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 BookCardDeprecatedVariant.EXPANDED:\n return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n case BookCardDeprecatedVariant.COMPACT:\n return this.renderCompactCard();\n case BookCardDeprecatedVariant.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 !== BookCardDeprecatedVariant.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(): HTMLZBookCardDeprecatedElement {\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"]}

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

@@ -1,6 +1,12 @@
 /* COMMON STYLES */
 :host {
+  /**
+   * @prop --z-book-card-ribbon-background-color: ribbon backgrund color
+   * @prop --z-book-card-ribbon-shadow-color: ribbon shadow color
+   * @prop --z-book-card-compact-width: compact card custom width
+   * @prop --z-book-card-compact-height: compact card custom height
+   */
   --z-book-card-ribbon-background-color: var(--avatar-C08);
   --z-book-card-ribbon-shadow-color: var(--green950);
   --z-book-card-compact-width: 262px;

package/dist/collection/components/deprecated/z-menu-deprecated/index.js CHANGED Viewed

@@ -3,7 +3,6 @@ import { Host, h, } from "@stencil/core";
  * @slot - Menu label
  * @slot header - Header to display as the first entry of the open menu.
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.
- * @cssprop --z-menu-label-color - Color of the label's text.
  */
 export class ZMenuDeprecated {
     toggle() {
@@ -108,7 +107,7 @@ export class ZMenuDeprecated {
         return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
     }
     render() {
-        return (h(Host, { key: 'c0cc18338db770e7b369bce7e469445219326566' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: 'c895c377c1cc572c18bbc56e9cb8c513346d1ae4', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '17df894168c27a4ec0599d10bb885761b5eded54', class: "header" }, h("slot", { key: 'd50f55ef51bdf388a75bc8739c29a58f32c6b316', name: "header", onSlotchange: this.checkContent }))), h("div", { key: '948157a99d60c696fa97b8b904366dc0992e87da', class: "items", role: "menu" }, h("slot", { key: 'e93150d2a5e7c1e33d7cfe8f297e9990e0d5c01e', name: "item", onSlotchange: this.onItemsChange }))))));
+        return (h(Host, { key: 'dde3e828c6617646ed848e91c53dc624fc23bc2d' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '9888a27020733770e87e87f2ac6193dc0430e36b', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: '09a21728b3cfc859dbdf59b2441326a610c2869f', class: "header" }, h("slot", { key: '72bbb4073b1e76569770dc7089526e9f9b055089', name: "header", onSlotchange: this.checkContent }))), h("div", { key: 'f53e86dea26861a62f3e924e67f14c97e42f7861', class: "items", role: "menu" }, h("slot", { key: '2b6e230e79f472828b85ba40281c9781a14dcef6', name: "item", onSlotchange: this.onItemsChange }))))));
     }
     static get is() { return "z-menu-deprecated"; }
     static get encapsulation() { return "shadow"; }
@@ -261,3 +260,4 @@ export class ZMenuDeprecated {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/deprecated/z-menu-deprecated/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/deprecated/z-menu-deprecated/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} 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 */\n@Component({\n tag: \"z-menu-deprecated\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenuDeprecated implements ComponentInterface {\n @Element() hostElement: HTMLZMenuDeprecatedElement;\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 if (this.open) {\n this.opened.emit();\n } else {\n this.closed.emit();\n }\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"]}

package/dist/collection/components/deprecated/z-menu-deprecated/styles.css CHANGED Viewed

@@ -5,11 +5,14 @@
 }
 :host {
+  /**
+   * @prop --z-menu-label-color: Color of the label's text.
+   */
+  --z-menu-label-color: var(--color-default-text);
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  --z-menu-label-color: var(--color-default-text);
 }
 ::slotted(a) {

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.js CHANGED Viewed

@@ -43,7 +43,7 @@ export class ZMenuSectionDeprecated {
         this.checkContent();
     }
     render() {
-        return (h(Host, { key: '9c0afdf0decad8a1eb51ba90c1fa1cb3bcbfa321', role: "menu", open: this.open }, h("button", { key: '79ddfb8c44ef6a47fad56cf2f2a1c5ea6ee4bd5a', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '3027b6975681544c8e2fef1c6f59be689664e26e', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '9de3a8659409445f8bf781498ecc1dd2d2691d6c', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: 'd5aa04822af0e9e9c07b6ee72bde0b875d2bafbb', class: "items" }, h("slot", { key: 'ca7eaac55e80903beb3d49373bbb28ca24f4e034', name: "item", onSlotchange: this.checkContent.bind(this) })))));
+        return (h(Host, { key: 'a65fd5af1f2b3b6c9d21c30336b806395624af59', role: "menu", open: this.open }, h("button", { key: '88460e785ca428d4a40f4dc9bdd56194a2b64d3e', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: 'b0198e42f9819b2e9c622d4672510d7a9584a1b1', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '6b6f41288e53ef83b6817eda49e1a77135552345', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '7721c370a48044d60749f366a718ca266d9afc73', class: "items" }, h("slot", { key: '1738da8320d0931abaf8a7dd854456e28bba9781', name: "item", onSlotchange: this.checkContent.bind(this) })))));
     }
     static get is() { return "z-menu-section-deprecated"; }
     static get encapsulation() { return "shadow"; }
@@ -130,3 +130,4 @@ export class ZMenuSectionDeprecated {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/deprecated/z-menu-section-deprecated/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAExH;;;;GAIG;AAMH,MAAM,OAAO,sBAAsB;IAqBzB,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACrB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,wEAAwE;IAExE,WAAW,CAAC,EAAc;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,YAAY;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAClF,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,EAAS;QACjC,MAAM,YAAY,GAAI,EAAE,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAgB,CAAC;QACzF,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,KAAI,IAAI,CAAC;IAC9D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,+DACE,KAAK,EAAC,OAAO,kBACC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;gBAE/B,6DAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS;gBAC7D,IAAI,CAAC,UAAU,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAAI,CACxE;YACR,IAAI,CAAC,IAAI,IAAI,CACZ,4DAAK,KAAK,EAAC,OAAO;gBAChB,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,CACJ,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n tag: \"z-menu-section-deprecated\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenuSectionDeprecated implements ComponentInterface {\n @Element() hostElement: HTMLZMenuSectionDeprecatedElement;\n\n /** Active state */\n @Prop({reflect: true})\n active?: boolean;\n\n @State()\n open: boolean;\n\n @State()\n hasContent: boolean;\n\n /** The section has been opened. */\n @Event()\n opened: EventEmitter;\n\n /** The section 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 if (this.open) {\n this.opened.emit();\n } else {\n this.closed.emit();\n }\n }\n\n /** Close the list when a click is performed outside of this Element. */\n @Listen(\"click\", {target: \"document\"})\n handleClick(ev: MouseEvent): void {\n if (!this.open || this.hostElement.contains(ev.target as Node)) {\n return;\n }\n\n this.open = false;\n this.closed.emit();\n }\n\n /**\n * Check if some content slot is set.\n */\n private checkContent(): void {\n this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\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?.innerText || null;\n }\n\n componentWillLoad(): void {\n this.checkContent();\n }\n\n render(): HTMLZMenuSectionElement {\n return (\n <Host\n role=\"menu\"\n open={this.open}\n >\n <button\n class=\"label\"\n aria-pressed={this.open ? \"true\" : \"false\"}\n onClick={this.toggle.bind(this)}\n >\n <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n </button>\n {this.open && (\n <div class=\"items\">\n <slot\n name=\"item\"\n onSlotchange={this.checkContent.bind(this)}\n ></slot>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/deprecated/z-section-title/index.js CHANGED Viewed

@@ -7,7 +7,6 @@ import { DividerSize, ZSectionTitleDividerPosition } from "../../../beans";
  * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,
  * following its width and removing the one for the primary title.
  * @slot primary-title - Slot for the primary title.
- * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
  */
 export class ZSectionTitle {
     constructor() {
@@ -25,7 +24,7 @@ export class ZSectionTitle {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: 'b2a5c1767c66f1b993f95c4907e5b6ac4555a7a5' }, h("slot", { key: 'dd96a1b84d003243f6a48a074c3ebe92c5b3c3e3', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: '8de1932f1eee5210277e73ba1a25359570a2ab06', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'd0f29c94936e5ab2a7491b3b6273ce51a1c8a626', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '13f04775afe18fc3f76bb09f48c415486896b421', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: '020c1a41ff7fa0881464463322b54754e7664957' }, h("slot", { key: 'c6d7baf944465d1092749cf288636fcd502e659c', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'ea70a8579ed61ba8b1d6488566473b90c47540d1', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '4cf602491394aaf97cead51bbc7f9b2da299bef3', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '47275d6411b00769db2e244bad13032d43cc9144', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     static get is() { return "z-section-title"; }
     static get encapsulation() { return "shadow"; }
@@ -92,3 +91,4 @@ export class ZSectionTitle {
     }
     static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/deprecated/z-section-title/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/deprecated/z-section-title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACpF,OAAO,EAAC,WAAW,EAAE,4BAA4B,EAAC,MAAM,gBAAgB,CAAC;AAEzE;;;;;;;GAOG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME;;;WAGG;QAEH,oBAAe,GAAiC,4BAA4B,CAAC,MAAM,CAAC;QAEpF;;WAEG;QAEH,cAAS,GAAG,IAAI,CAAC;KA8BlB;IAxBC,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAC/E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,iBAAiB,GAAG;YAC9B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,MAAM,IAAI,CAC1F,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH;YACD,6DAAM,IAAI,EAAC,eAAe,GAAG;YAC5B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,KAAK,IAAI,CACzF,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n */\n@Component({\n tag: \"z-section-title\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZSectionTitle implements ComponentInterface {\n /**\n * Divider position for the primary title.\n * This prop only works if the secondary title is not set.\n */\n @Prop()\n dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n /**\n * Whether the primary title text is uppercase.\n */\n @Prop({reflect: true})\n uppercase = true;\n\n @Element() host: HTMLZSectionTitleElement;\n\n private hasSecondaryTitle: boolean;\n\n componentWillRender(): void {\n this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n }\n\n render(): HTMLZSectionTitleElement {\n return (\n <Host>\n <slot name=\"secondary-title\" />\n {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n <z-divider\n size={DividerSize.LARGE}\n color=\"z-section-title--divider-color\"\n />\n )}\n <slot name=\"primary-title\" />\n {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n <z-divider\n size={DividerSize.LARGE}\n color=\"z-section-title--divider-color\"\n />\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/deprecated/z-section-title/styles.css CHANGED Viewed

@@ -1,4 +1,7 @@
 :host {
+  /**
+   * @prop --z-section-title--divider-color: Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
+   */
   --z-section-title--divider-color: var(--red500);
   display: flex;

package/dist/collection/components/file-upload/z-dragdrop-area/index.js CHANGED Viewed

@@ -12,12 +12,12 @@ export class ZDragdropArea {
         }
     }
     render() {
-        return (h(Host, { key: '042a22ebd47c1bee49ca08121fa3ef23c99daa97', class: { dragover: this.dragging }, onDragOver: (e) => {
+        return (h(Host, { key: 'ec92afc8d6998ac3595b4c84121cc80204367bbb', class: { dragover: this.dragging }, onDragOver: (e) => {
                 e.preventDefault();
                 this.dragging = true;
             }, onDragLeave: () => {
                 this.dragging = false;
-            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '9f4cb47d47b9976a86f5eedba956aa3cf0939f81', class: "dragover-container" }, h("z-button", { key: 'fc12e55894affd3273bffa56f1508b0d1d23e92d' }, this.dragAndDropLabel)), h("slot", { key: '0f99ee53ef49d5792772b9993bade7d5b46e6c58' })));
+            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '6008c32e681b7c8f9f1063bba50c6106e12599de', class: "dragover-container" }, h("z-button", { key: 'ea4bfd5b7ee6d05241f5efb18844cd8beb10dde2' }, this.dragAndDropLabel)), h("slot", { key: '95aa7512bbbd0efcea3c3dbafecc4b33a1d24f87' })));
     }
     static get is() { return "z-dragdrop-area"; }
     static get encapsulation() { return "shadow"; }
@@ -78,3 +78,4 @@ export class ZDragdropArea {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/file-upload/z-dragdrop-area/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/file-upload/z-dragdrop-area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOvG,MAAM,OAAO,aAAa;IAL1B;QAUE,oFAAoF;QAEpF,aAAQ,GAAG,KAAK,CAAC;KAkClB;IA5BS,MAAM,CAAC,CAAY;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EAChC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;YAE9B,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,mEAAW,IAAI,CAAC,gBAAgB,CAAY,CACxC;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-dragdrop-area\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZDragdropArea implements ComponentInterface {\n /** drag & drop button label */\n @Prop()\n dragAndDropLabel: string;\n\n /** State that indicates if the user is dragging a file over the drag & drop area */\n @State()\n dragging = false;\n\n /** Emitted when user drop one or more files */\n @Event()\n fileDropped: EventEmitter;\n\n private onDrop(e: DragEvent): void {\n e.preventDefault();\n this.dragging = false;\n if (e.dataTransfer.files.length) {\n this.fileDropped.emit(e.dataTransfer.files);\n }\n }\n\n render(): HTMLZDragdropAreaElement {\n return (\n <Host\n class={{dragover: this.dragging}}\n onDragOver={(e) => {\n e.preventDefault();\n this.dragging = true;\n }}\n onDragLeave={() => {\n this.dragging = false;\n }}\n onDrop={this.onDrop.bind(this)}\n >\n <div class=\"dragover-container\">\n <z-button>{this.dragAndDropLabel}</z-button>\n </div>\n <slot />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/file-upload/z-file/index.js CHANGED Viewed

@@ -30,7 +30,7 @@ export class ZFile {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h(Host, { key: 'b14de221b558a20b6a73755f4a299743fa5a7d23' }, this.allowPopover && (h("z-popover", { key: 'fc3a7c327d89a7a9ea6b9660d17d78de1922729c', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '7f33d40074ba639bd8da65132dad5b2fa1cf349e', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: 'ae8746950f0ee745c77a1b5602c4f6ecb0278afd', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '6ef36d2bebe82fbcb9919cce4c2a4c8d657ba255', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+        return (h(Host, { key: '12ffcf9cd4e06418f8ef0c0fe6f901519ea81578' }, this.allowPopover && (h("z-popover", { key: 'b77adda2c9f80584b3e74ab82d5c8b5198b50d88', open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { key: '9d0bb9bbdb210ce143a129ca4f46a6409b85b393', class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { key: '9d9c8f64f63c4723c2f6540be7d6c534650a847d', ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { key: '959647e217388cad43c3bb3536a44ce22b548067', ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
     }
     static get is() { return "z-file"; }
     static get encapsulation() { return "scoped"; }
@@ -133,3 +133,4 @@ export class ZFile {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/file-upload/z-file/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/file-upload/z-file/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACxH,OAAO,EAAC,eAAe,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,gCAAgC,CAAC;AAQ3D,MAAM,OAAO,KAAK;IANlB;QAsBE,iBAAY,GAAG,KAAK,CAAC;QAGrB,mBAAc,GAAG,KAAK,CAAC;KAoExB;IA5DS,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC;IAGD,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,gBAAgB;;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;YACxE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,kDAAI,CAAC;IACvB,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,YAAY,IAAI,CACpB,kEACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,QAAQ,EAAE,eAAe,CAAC,IAAI,EAC9B,MAAM,EAAE,IAAI,CAAC,IAAI;gBAEjB,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAQ,CAC3D,CACb;YACD,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,EAAsB,CAAC,EACjD,EAAE,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,EAC7B,eAAe,EAAC,kBAAkB,EAClC,IAAI,EAAE,SAAS,CAAC,OAAO;gBAEvB,6DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,QAAQ,CACT,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {PopoverPosition, ZChipType} from \"../../../beans\";\nimport {Breakpoints} from \"../../../constants/breakpoints\";\n\n@Component({\n tag: \"z-file\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZFile implements ComponentInterface {\n private icon: HTMLElement;\n\n private ellipsis?: HTMLSpanElement;\n\n private chip?: HTMLZChipElement;\n\n /** File chip id */\n @Prop()\n fileNumber: number;\n\n /** File name */\n @Prop()\n fileName: string;\n\n @State()\n allowPopover = false;\n\n @State()\n popoverVisible = false;\n\n @Element() el: HTMLZFileElement;\n\n /** Emitted when a z-file component is removed from the DOM */\n @Event()\n removeFile: EventEmitter;\n\n private removeFileHandler(): void {\n this.removeFile.emit({fileName: this.fileName});\n this.el.remove();\n }\n\n @Listen(\"mouseover\")\n onMouseOver(): void {\n this.popoverVisible = true;\n }\n\n @Listen(\"mouseleave\")\n onMouseLeave(): void {\n this.popoverVisible = false;\n }\n\n @Listen(\"interactiveIconClick\")\n onInteractiveIconClick(): void {\n this.removeFileHandler();\n }\n\n componentDidLoad(): void {\n if (this.elementHasEllipsis() && window.innerWidth > Breakpoints.TABLET) {\n this.allowPopover = true;\n }\n\n this.icon?.focus?.();\n }\n\n private elementHasEllipsis(): boolean {\n return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n }\n\n render(): HTMLZFileElement {\n return (\n <Host>\n {this.allowPopover && (\n <z-popover\n open={this.popoverVisible}\n position={PopoverPosition.AUTO}\n bindTo={this.chip}\n >\n <span class=\"body-5 tooltip-content\">{this.ellipsis.innerText}</span>\n </z-popover>\n )}\n <z-chip\n ref={(el) => (this.chip = el as HTMLZChipElement)}\n id={`chip-${this.fileNumber}`}\n interactiveIcon=\"multiply-circled\"\n type={ZChipType.DEFAULT}\n >\n <span\n ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n tabIndex={-1}\n >\n {this.fileName}\n </span>\n </z-chip>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/file-upload/z-file-upload/index.js CHANGED Viewed

@@ -133,7 +133,7 @@ export class ZFileUpload {
         return (h("section", { class: { "files-container": true, "hidden": !this.files.length } }, h("div", { class: "uploaded-files-label heading-3-sb" }, this.uploadedFilesLabel), h("div", { class: "files-wrapper" }, h("slot", { name: "files" }))));
     }
     renderInput() {
-        return (h("input", { type: "file", name: this.inputName, multiple: true, onChange: (e) => this.onFilesChange(e), accept: this.acceptedFormat, ref: (val) => (this.input = val) }));
+        return (h("input", { type: "file", name: this.inputName, multiple: true, onChange: (e) => this.onFilesChange(e), accept: this.acceptedFormat, "aria-labelledby": this.description ? "description" : undefined, ref: (val) => (this.input = val) }));
     }
     renderUploadButton() {
         return [
@@ -178,7 +178,7 @@ export class ZFileUpload {
         });
     }
     render() {
-        return (h(Host, { key: '9f2aeeeb12f48f34a732137c809c48c23d6a190e' }, this.mainTitle && (h("div", { key: '63924f49200a966ed3e7244c685ae9df6eeefbc1', id: "title", class: "heading-3-sb" }, this.mainTitle)), this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode(), !!this.invalidFiles.size && this.showErrors && (h("z-modal", { key: 'e3c015962d22df4c1d769d6177417bbf8d6bcc93', modalid: `file-upload-${this.type}-error-modal`, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => this.resetErrors(), onModalBackgroundClick: () => this.resetErrors() }, h("div", { key: '0cc1b6a3a952e1e683a70b952af131b74e7021e0', slot: "modalContent" }, h("div", { key: '833875c9ffe28ad248a4cacd7249153c7230df0a', class: "modal-wrapper body-3" }, this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()))))));
+        return (h(Host, { key: '26a1a04ff6d1a9c9cf0e16311bb747b349c7ca67' }, this.mainTitle && (h("div", { key: 'cbce95e36bb7a1fe81c8c41e0723169e6b47442d', id: "title", class: "heading-3-sb" }, this.mainTitle)), this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode(), !!this.invalidFiles.size && this.showErrors && (h("z-modal", { key: '6a000d85f1f9b46a2872b4fa40b978a97427018c', modalid: `file-upload-${this.type}-error-modal`, ref: (val) => (this.errorModal = val), modaltitle: this.errorModalTitle, onModalClose: () => this.resetErrors(), onModalBackgroundClick: () => this.resetErrors() }, h("div", { key: 'caa8f6424a54d279ed2eca6c7514390324b40c59', slot: "modalContent" }, h("div", { key: 'b069c1fff610bcf4adbff57b0c5a9fa3e70e32ea', class: "modal-wrapper body-3" }, this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()))))));
     }
     static get is() { return "z-file-upload"; }
     static get encapsulation() { return "scoped"; }
@@ -658,3 +658,4 @@ export class ZFileUpload {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/file-upload/z-file-upload/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/file-upload/z-file-upload/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ZFileUploadType} from \"../../../beans\";\n\nexport type ZFileUploadError = {cause: \"format\" | \"size\"; message: string};\n\n@Component({\n tag: \"z-file-upload\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZFileUpload implements ComponentInterface {\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 /** 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 /** allowed file message */\n @Prop()\n allowedFilesMessage?: string;\n\n /** upload clickable message */\n @Prop()\n uploadClickableMessage?: string = \"Carica\";\n\n /** upload message */\n @Prop()\n uploadMessage?: string = \"o trascina dal tuo computer\";\n\n /** error modal title */\n @Prop()\n errorModalTitle?: string = \"Errore di caricamento\";\n\n /** error modal message */\n @Prop()\n errorModalMessage?: string;\n\n /** loaded files label */\n @Prop()\n uploadedFilesLabel?: string = \"File appena caricati\";\n\n /** uploaded files history rendering */\n @Prop()\n hasFileSection?: boolean = true;\n\n /** Value to set on the file input's `name` attribute (for use with forms) */\n @Prop()\n inputName? = \"z-file-upload\";\n\n /**\n * Whether to show errors in the internal modal or leave the handling to the app.\n * Errors will still be emitted.\n */\n @Prop()\n showErrors = true;\n\n /** Internal store of the component type. It will change when viewport goes from desktop to tablet/mobile and vice versa */\n @State()\n private _type: ZFileUploadType = this.type;\n\n /** Files added by the user */\n @State()\n files: File[] = [];\n\n /** Map of files whose upload caused an error and the relative errors, with the cause and a message */\n @State()\n invalidFiles: Map<string, ZFileUploadError[]> = new Map<string, ZFileUploadError[]>();\n\n /** Input ref */\n @State()\n private input: HTMLInputElement;\n\n /** Emitted when user select one or more files */\n @Event()\n fileInput: EventEmitter<File>;\n\n /**\n * Emits an array of error messages related to one or more files not allowed.\n * Emitted when some file is dropped or selected.\n */\n @Event()\n fileError: EventEmitter<{file: string; errors: ZFileUploadError[]}>;\n\n @Element() host: HTMLZFileUploadElement;\n\n private errorModal: HTMLZModalElement;\n\n /** Listen `removeFile` event sent from z-file component */\n @Listen(\"removeFile\")\n onFileRemoved(e: CustomEvent): void {\n this.removeFile(e.detail.fileName);\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.checkFilesValidity(this.input.files);\n }\n\n /** Get the list of uploaded files */\n @Method()\n async getFiles(): Promise<File[]> {\n return this.files;\n }\n\n /** Remove a previously uploaded file */\n @Method()\n async removeFile(fileName: string): Promise<void> {\n const files = this.files;\n const index = files.findIndex((file) => file.name === fileName);\n if (index >= 0) {\n files.splice(index, 1);\n this.files = [...files];\n }\n }\n\n private checkFilesValidity(files: FileList): Map<string, string[]> {\n if (!files.length) {\n return;\n }\n\n Array.from(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 && !this.files.find((f) => f.name === file.name)) {\n this.files = [...this.files, file];\n this.fileInput.emit(file);\n this.input.value = \"\";\n\n return;\n }\n\n const sizeError = `Il file ${file.name} supera il limite di ${this.fileMaxSize}MB`;\n const formatError = `Il file ${file.name} ha un formato non supportato`;\n const errors = [\n !fileSizeOk && {cause: \"size\" as const, message: sizeError},\n !fileFormatOk && {cause: \"format\" as const, message: formatError},\n ].filter(Boolean);\n this.invalidFiles.set(file.name, errors);\n this.invalidFiles = new Map(this.invalidFiles); // trigger state update\n this.fileError.emit({file: file.name, errors});\n });\n }\n\n private resetErrors(): void {\n this.invalidFiles = new Map<string, ZFileUploadError[]>();\n }\n\n private onFilesChange(e: Event): void {\n this.checkFilesValidity((e.target as HTMLInputElement).files);\n }\n\n componentWillLoad(): void {\n // force default type on mobile and tablet viewport\n const mql = window.matchMedia(\"(max-width: 1151px)\");\n this._type = mql.matches ? ZFileUploadType.DEFAULT : this.type;\n mql.addEventListener(\"change\", (e) => {\n this._type = e.matches ? ZFileUploadType.DEFAULT : this.type;\n });\n }\n\n componentDidUpdate(): void {\n if (!this.showErrors || !this.invalidFiles.size) {\n return;\n }\n\n this.errorModal.open();\n }\n\n private renderDescription(cssClass): HTMLElement | undefined {\n if (!this.description) {\n return;\n }\n\n return (\n <span\n id=\"description\"\n class={cssClass}\n >\n {this.description}\n </span>\n );\n }\n\n private renderAllowedFilesMessage(): 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 defaultMessage =\n fileFormatString || fileWeightString ? `Puoi allegare file${fileFormatString}${fileWeightString}.` : undefined;\n\n if (!this.allowedFilesMessage && !defaultMessage) {\n return;\n }\n\n return <span class=\"allowed-files-message body-3\">{this.allowedFilesMessage || defaultMessage}</span>;\n }\n\n private renderFileSection(): HTMLElement {\n if (!this.hasFileSection) {\n return;\n }\n\n return (\n <section class={{\"files-container\": true, \"hidden\": !this.files.length}}>\n <div class=\"uploaded-files-label heading-3-sb\">{this.uploadedFilesLabel}</div>\n <div class=\"files-wrapper\">\n <slot name=\"files\" />\n </div>\n </section>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n type=\"file\"\n name={this.inputName}\n multiple\n onChange={(e) => this.onFilesChange(e)}\n accept={this.acceptedFormat}\n aria-labelledby={this.description ? \"description\" : undefined}\n ref={(val) => (this.input = val)}\n />\n );\n }\n\n private renderUploadButton(): unknown[] {\n return [\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 >\n {this.uploadBtnLabel}\n </z-button>,\n this.renderInput(),\n ];\n }\n\n private renderUploadLink(): unknown[] {\n return [\n this.renderInput(),\n <span class=\"body-1 upload-link-text\">\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 >\n {this.uploadClickableMessage}\n </span>{\" \"}\n {this.uploadMessage}\n </span>,\n ];\n }\n\n private renderDefaultMode(): unknown[] {\n return [\n this.renderDescription(\"body-3-sb\"),\n this.renderAllowedFilesMessage(),\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.renderAllowedFilesMessage()}\n </div>\n </z-dragdrop-area>,\n ];\n }\n\n private renderFileErrors(): HTMLElement[] {\n return Array.from(this.invalidFiles).map(([fileName, errors]) => {\n const prefix = `Il file ${fileName}`;\n\n return (\n <span class=\"error-message\">\n Il file <span class=\"body-3-sb\">{fileName}</span>\n {errors.map(({message}) => message.replace(prefix, \"\")).join(\" e \")}.\n </span>\n );\n });\n }\n\n render(): HTMLZFileUploadElement {\n return (\n <Host>\n {this.mainTitle && (\n <div\n id=\"title\"\n class=\"heading-3-sb\"\n >\n {this.mainTitle}\n </div>\n )}\n {this._type == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()}\n {!!this.invalidFiles.size && this.showErrors && (\n <z-modal\n modalid={`file-upload-${this.type}-error-modal`}\n ref={(val) => (this.errorModal = val)}\n modaltitle={this.errorModalTitle}\n onModalClose={() => this.resetErrors()}\n onModalBackgroundClick={() => this.resetErrors()}\n >\n <div slot=\"modalContent\">\n <div class=\"modal-wrapper body-3\">\n {this.errorModalMessage ? this.errorModalMessage : this.renderFileErrors()}\n </div>\n </div>\n </z-modal>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/index.js CHANGED Viewed

@@ -6,3 +6,4 @@
 //
 // Must be fixed
 //
+//# sourceMappingURL=index.js.map

package/dist/collection/components/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,mBAAmB;AACnB,EAAE;AACF,oEAAoE;AACpE,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,EAAE","sourcesContent":["//\n// Temp workaround:\n//\n// Empty file to prevent errors when importing beans in stencil apps\n// Stencil apps with React bindings will not work\n//\n// Must be fixed\n//\n"]}

package/dist/collection/components/list/z-list/index.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class ZList {
         this.setChildrenSizeType();
     }
     render() {
-        return (h(Host, { key: 'f34729eb14ef690bf0aeb7da4b406e955a66fbf7' }, h("slot", { key: '82b4a9c72937797bb8f7e4141f7a4c609908c702' })));
+        return (h(Host, { key: '2aac86dccac20cc21ec7c1341a99298f8523af49' }, h("slot", { key: '207231c63243efcd61917a9b4aa3394e22379bbd' })));
     }
     static get is() { return "z-list"; }
     static get encapsulation() { return "shadow"; }
@@ -121,3 +121,4 @@ export class ZList {
     }
     static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/list/z-list/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACpF,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOlD,MAAM,OAAO,KAAK;IALlB;QAQE;;WAEG;QAEH,SAAI,GAAc,QAAQ,CAAC,MAAM,CAAC;QAElC;;WAEG;QAEH,aAAQ,GAAc,QAAQ,CAAC,IAAI,CAAC;QAEpC;;WAEG;QAEH,SAAI,GAAG,MAAM,CAAC;KAsBf;IApBS,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZList implements ComponentInterface {\n @Element() host: HTMLZListElement;\n\n /**\n * [optional] Sets size of inside elements.\n */\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /**\n * [optional] type of the list marker for each element\n */\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /**\n * Sets role of the element.\n */\n @Prop({reflect: true})\n role = \"list\";\n\n private setChildrenSizeType(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n }\n }\n\n componentDidLoad(): void {\n this.setChildrenSizeType();\n }\n\n render(): HTMLZListElement {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/list/z-list-element/index.js CHANGED Viewed

@@ -157,7 +157,7 @@ export class ZListElement {
         }
     }
     render() {
-        return (h(Host, { key: '565d88705b517e78e6b9c05f5923903704472751', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: '6a1ccb7af0b9455e52e4b0b7699722a2f2e98f01', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '64a7d40c04afdb7cd9fc1f090926d7de10341ef4', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'e781e6f655bd4a7d0987fef33d8b426caa7ed0aa', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '9a06293fba7e3b74fe169d1d3e927a4abd7b17f1', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: 'c962c30a71313bd84b1075ad03a96e4b5de77a42', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'ccca86019dec23767ae7bcf5af988c7f2366d850', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'f8f1b6053d0fe0415b520c4f1deaba92e24019b8', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     static get is() { return "z-list-element"; }
     static get encapsulation() { return "shadow"; }
@@ -599,3 +599,4 @@ export class ZListElement {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/list/z-list-element/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n DividerSize,\n ExpandableListButtonAlign,\n ExpandableListStyle,\n KeyboardCode,\n ListDividerType,\n ListSize,\n ListType,\n} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-element\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListElement implements ComponentInterface {\n @Element() host: HTMLZListElementElement;\n\n /** remove filter click event, returns filterid */\n @Event({\n eventName: \"accessibleFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n accessibleFocus: EventEmitter<number>;\n\n /** set parent aria-activedescendant on focus event, returns filterid */\n @Event({\n eventName: \"ariaDescendantFocus\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n ariaDescendantFocus: EventEmitter<number>;\n\n /** remove filter click event, returns filterid */\n @Event({\n eventName: \"clickItem\",\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n clickItem: EventEmitter;\n\n @Listen(\"accessibleFocus\", {target: \"document\"})\n accessibleFocusHandler(e: CustomEvent): void {\n if (this.listElementId === e.detail) {\n const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n toFocus.focus();\n }\n }\n\n /**\n * [optional] Align expandable button left or right.\n */\n @Prop({reflect: true})\n alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n /**\n * [optional] Sets element clickable.\n */\n @Prop({reflect: true})\n clickable?: boolean = false;\n\n /**\n * [optional] Sets the divider color.\n */\n @Prop()\n dividerColor?: string = \"color-surface03\";\n\n /**\n * [optional] Sets the position where to insert the divider.\n */\n @Prop()\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /**\n * [optional] Sets the divider size.\n */\n @Prop()\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /**\n * [optional] Sets element as expandable.\n */\n @Prop({reflect: true})\n expandable?: boolean = false;\n\n /**\n * [optional] Sets expandable style to element.\n */\n @Prop()\n expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n /**\n * [optional] List element id.\n */\n @Prop({reflect: true})\n listElementId?: number;\n\n /**\n * [optional] Sets size of inside elements.\n */\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /**\n * [optional] Sets text color of the element.\n */\n @Prop({reflect: true})\n color?: string = \"none\";\n\n /**\n * [optional] Sets disabled style of the element.\n */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /**\n * [optional] position of the list element inside the list or the group\n */\n @Prop({reflect: true})\n listElementPosition?: string = \"0\";\n\n /**\n * [optional] type of the list marker for each element\n */\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /**\n * [optional] Sets element as tree item.\n */\n @Prop()\n hasTreeItems?: boolean;\n\n /**\n * Sets element role.\n */\n @Prop({reflect: true})\n role = \"listitem\";\n\n /** set tabindex to Host tag (optional). Defaults to 0. */\n @Prop()\n htmlTabindex?: number | null = 0;\n\n @State()\n showInnerContent = false;\n\n private openElementConfig = {\n accordion: {\n open: \"minus-circled\",\n close: \"plus-circled\",\n },\n menu: {\n open: \"chevron-up\",\n close: \"chevron-down\",\n },\n };\n\n /**\n * Constructor.\n */\n constructor() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n /**\n * Handler for click on element. If element is expandable, change state.\n * @returns void\n */\n private handleClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.clickItem.emit(this.listElementId);\n if (!this.expandable) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n private handleKeyDown(event): void {\n const expandByKey = event.code === KeyboardCode.ENTER;\n switch (event.code) {\n case KeyboardCode.ARROW_DOWN:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId + 1);\n break;\n case KeyboardCode.ARROW_UP:\n event.preventDefault();\n this.accessibleFocus.emit(this.listElementId - 1);\n break;\n case KeyboardCode.ENTER:\n event.preventDefault();\n this.clickItem.emit(this.listElementId);\n break;\n default:\n break;\n }\n\n if (!this.expandable || !expandByKey) {\n return;\n }\n this.showInnerContent = !this.showInnerContent;\n }\n\n /**\n * Renders button to expand element.\n * @returns expadable button\n */\n private renderExpandableButton(): HTMLZIconElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <z-icon\n name={\n this.showInnerContent\n ? this.openElementConfig[this.expandableStyle].open\n : this.openElementConfig[this.expandableStyle].close\n }\n />\n );\n }\n\n /**\n * Renders expanded content if element is expandable.\n * @returns expanded content\n */\n private renderExpandedContent(): HTMLDivElement {\n if (!this.expandable) {\n return null;\n }\n\n return (\n <div\n class={{\n \"z-list-element-inner-container\": true,\n \"expanded\": this.showInnerContent,\n }}\n >\n <slot name=\"inner-content\" />\n </div>\n );\n }\n\n /**\n * Renders content of the z-list-element\n * @returns list content\n */\n private renderContent(): HTMLDivElement {\n if (this.listType === ListType.NONE) {\n return <slot />;\n }\n\n if (this.listType === ListType.ORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <div>{this.listElementPosition}.&emsp;</div>\n <slot />\n </div>\n );\n }\n\n if (this.listType === ListType.UNORDERED) {\n return (\n <div class=\"z-list-content-container\">\n <span>•&emsp;</span>\n <slot />\n </div>\n );\n }\n }\n\n render(): HTMLZListElementElement {\n return (\n <Host\n aria-expanded={this.expandable ? this.showInnerContent : null}\n onClick={this.handleClick}\n onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n onKeyDown={this.handleKeyDown}\n clickable={this.clickable && !this.disabled}\n tabIndex={this.hasTreeItems ? undefined : this.htmlTabindex}\n role={this.hasTreeItems ? \"none\" : this.role}\n >\n <div\n class={this.hasTreeItems ? \"tree-element-container\" : \"container\"}\n style={!this.disabled && {color: `var(--${this.color})`}}\n tabindex=\"-1\"\n id={`z-list-element-id-${this.listElementId}`}\n part=\"list-item-container\"\n >\n <div class=\"z-list-element-container\">\n {this.renderExpandableButton()}\n {this.renderContent()}\n </div>\n {this.renderExpandedContent()}\n </div>\n {this.dividerType === ListDividerType.ELEMENT && (\n <z-divider\n class={{\"z-tree-list-divider\": this.hasTreeItems}}\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/list/z-list-group/index.js CHANGED Viewed

@@ -44,11 +44,11 @@ export class ZListGroup {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (h(Host, { key: 'a2b30a3071d35ba28d8e485ff92a88e537a85290' }, h("div", { key: '528f17bfa6de4ccb252e86ec424b388f3d6d4ff0', class: {
+        return (h(Host, { key: 'cd9bd738252e44011edad7b468ad711a2ef83f12' }, h("div", { key: 'd2c2e41d50b4884b438ae7b25e9e2b06260df6ac', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, h("slot", { key: '318ed932865eef9943a0f7ff7ae87e02a2ce968e', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '3d6d1ea46c42420c86b4f5f22bf5d5bcb1c5268f', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: 'f02a9b862b895d421be12ba4eb9625269f086e03' })));
+            } }, h("slot", { key: 'c47a8ea2508c87bbd0688248dcae0350d159350a', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: 'c0586eee517b42aaf76507286bd086abaecb8013', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '5f558529f5de2f4b62403d239e8424eea6259fd3' })));
     }
     static get is() { return "z-list-group"; }
     static get encapsulation() { return "shadow"; }
@@ -235,3 +235,4 @@ export class ZListGroup {
     }
     static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/list/z-list-group/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACpF,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;IALvB;QAQE;;WAEG;QAEH,SAAI,GAAc,QAAQ,CAAC,MAAM,CAAC;QAElC;;WAEG;QAEH,gBAAW,GAAqB,eAAe,CAAC,IAAI,CAAC;QAErD;;WAEG;QAEH,gBAAW,GAAiB,WAAW,CAAC,KAAK,CAAC;QAE9C;;WAEG;QAEH,iBAAY,GAAY,SAAS,CAAC;QAElC;;WAEG;QAEH,aAAQ,GAAc,QAAQ,CAAC,IAAI,CAAC;QAQpC;;WAEG;QAEH,SAAI,GAAG,OAAO,CAAC;KA4ChB;IAxCC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,CAAC;YACD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;oBAClD,0BAA0B,EAAE,IAAI,CAAC,YAAY;iBAC9C;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,kEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n tag: \"z-list-group\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZListGroup implements ComponentInterface {\n @Element() host: HTMLZListGroupElement;\n\n /**\n * [optional] Sets size of inside elements.\n */\n @Prop({reflect: true})\n size?: ListSize = ListSize.MEDIUM;\n\n /**\n * [optional] Sets the position where to insert the divider.\n */\n @Prop({reflect: true})\n dividerType?: ListDividerType = ListDividerType.NONE;\n\n /**\n * [optional] Sets the divider size.\n */\n @Prop({reflect: true})\n dividerSize?: DividerSize = DividerSize.SMALL;\n\n /**\n * [optional] Sets the divider color.\n */\n @Prop({reflect: true})\n dividerColor?: string = \"gray200\";\n\n /**\n * [optional] type of the list marker for each element\n */\n @Prop({reflect: true})\n listType?: ListType = ListType.NONE;\n\n /**\n * [optional] check for tree items in grouped lists\n */\n @Prop()\n hasTreeItems?: boolean;\n\n /**\n * Sets element role.\n */\n @Prop({reflect: true})\n role = \"group\";\n\n private hasHeader: boolean;\n\n componentDidLoad(): void {\n const children = this.host.children;\n for (let i = 0; i < children.length; i++) {\n if (children.length - 1 > i) {\n children[i].setAttribute(\"divider-type\", this.dividerType);\n children[i].setAttribute(\"divider-size\", this.dividerSize);\n children[i].setAttribute(\"divider-color\", this.dividerColor);\n }\n children[i].setAttribute(\"size\", this.size);\n children[i].setAttribute(\"list-type\", this.listType);\n children[i].setAttribute(\"list-element-position\", i.toString());\n }\n }\n\n componentWillLoad(): void {\n this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n }\n\n render(): HTMLZListGroupElement {\n return (\n <Host>\n <div\n class={{\n \"z-list-group-header-container\": true,\n \"has-header\": this.hasHeader && !this.hasTreeItems,\n \"grouped-tree-list-header\": this.hasTreeItems,\n }}\n >\n <slot name=\"header-title\" />\n {this.dividerType === ListDividerType.HEADER && (\n <z-divider\n color={this.dividerColor}\n size={this.dividerSize}\n />\n )}\n </div>\n <slot />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/list/z-tree-list/index.js CHANGED Viewed

@@ -93,7 +93,7 @@ export class ZTreeList {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: 'ca5b846e86140efd7a98028001e646349cc5683a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: 'eac955c253173abb6e5f0992d356311dc52f9ee6', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (h(Host, { key: '68d06fd53ad0f4bce01853b95aef0f7482f3304a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '6b8010ae9caf73ec0a43b09f5d9610247110d1a6', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     static get is() { return "z-tree-list"; }
     static get encapsulation() { return "shadow"; }
@@ -202,3 +202,4 @@ export class ZTreeList {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/list/z-tree-list/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-tree-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, TreeListItem} from \"../../../beans\";\n\n@Component({\n tag: \"z-tree-list\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTreeList implements ComponentInterface {\n @Element() host: HTMLZTreeListElement;\n\n /** Items to render, if they have the url property they will be rendered as clickable links */\n @Prop()\n items: TreeListItem[] | string = [];\n\n /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n @Prop({reflect: true})\n htmlAriaLabelledby: string;\n\n /** Used for aria-label attribute, sets name in \"tree\" */\n @Prop({reflect: true})\n htmlSectionTitle: string;\n\n /** Emitted on item click, it return the id, name and url of the clicked item */\n @Event()\n treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n private parsedItems: TreeListItem[] = [];\n\n private htmlTag: string;\n\n @Watch(\"items\")\n watchItems(): void {\n this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n private handleClick(item: TreeListItem): void {\n this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n }\n\n private getFocusableElements(): HTMLElement[] {\n return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n }\n\n private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n let ancestor: HTMLElement | null = element;\n\n for (let i = 0; i < levels; i++) {\n ancestor = ancestor?.parentElement;\n if (!ancestor) {\n return;\n }\n }\n\n return ancestor;\n }\n\n private handleArrowNav(event: KeyboardEvent): void {\n if (event.code === KeyboardCode.TAB) {\n event.preventDefault();\n\n return;\n }\n\n const focusableElements = this.getFocusableElements();\n const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n if (currentIndex === -1) {\n return;\n }\n\n if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n event.preventDefault();\n\n const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n return;\n }\n\n focusableElements[nextIndex].focus();\n }\n\n if (event.code === KeyboardCode.ARROW_LEFT) {\n event.preventDefault();\n const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n if (\n !ancestor ||\n !ancestor.children[0] ||\n (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n ) {\n return;\n }\n\n (ancestor.children[0] as HTMLElement).focus();\n }\n\n if (event.code === KeyboardCode.ARROW_RIGHT) {\n event.preventDefault();\n\n const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n if (!parentElm) {\n return;\n }\n\n const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n if (!childrenContainer) {\n return;\n }\n\n const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n if (!firstChild) {\n return;\n }\n\n firstChild.focus();\n }\n }\n\n private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n this.htmlTag = item.url ? \"a\" : \"span\";\n\n const treeListContent = (\n <z-list-element\n id={key}\n class={!item.icon ? \"no-icon-elm\" : \"\"}\n clickable={Boolean(item.url)}\n hasTreeItems={true}\n role=\"none\"\n aria-hidden={undefined}\n >\n <this.htmlTag\n class={{\n \"list-element\": true,\n \"z-link\": Boolean(item.url),\n \"link-clickable\": Boolean(item.url),\n }}\n tabIndex={item.url ? 0 : -1}\n onClick={() => this.handleClick(item)}\n onKeyUp={(event: KeyboardEvent) => {\n if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n this.handleClick(item);\n }\n }}\n onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n role={item.url ? \"treeitem\" : undefined}\n aria-hidden={item.url ? undefined : \"true\"}\n aria-expanded={item.children?.length > 0 && true}\n aria-level={level}\n aria-label={item.name}\n href={item.url}\n >\n <span class=\"item ellipsis\">\n {item.icon && (\n <z-icon\n width={16}\n height={16}\n fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n <span\n class={{\n \"item-label\": true,\n \"no-icon-label\": !item.icon,\n \"bold-item\": item.bold,\n }}\n title={item.name}\n >\n {item.name}\n </span>\n </span>\n </this.htmlTag>\n {item.children?.length > 0 && (\n <z-list role=\"group\">\n <div class=\"children-node\">\n {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n </div>\n </z-list>\n )}\n </z-list-element>\n );\n\n return treeListContent;\n }\n\n render(): HTMLZTreeListElement {\n const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n return (\n <Host\n class=\"tree-list\"\n role={hasClickableItems ? \"navigation\" : \"none\"}\n aria-hidden={hasClickableItems ? undefined : \"true\"}\n aria-labelledby={this.htmlAriaLabelledby}\n >\n <div\n tabIndex={-1}\n role={hasClickableItems ? \"tree\" : \"none\"}\n aria-hidden={hasClickableItems ? undefined : \"true\"}\n aria-label={this.htmlSectionTitle}\n >\n {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n </div>\n </Host>\n );\n }\n}\n"]}