npm - @zanichelli/albe-web-components - Versions diffs - 13.6.0 → 14.0.0 - Mend

@zanichelli/albe-web-components 13.6.0 → 14.0.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 (599) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/z-app-header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Element, Prop, State, Watch, Host, Event, EventEmitter, Listen} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/*\n @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-height - Defaults to `auto`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-text01`.\n * @cssprop --app-header-title-font-size - Variable to customize the title's font size.\n * NOTE: Only use one of the exported `--app-header-typography--size` as a value.\n Defaults to `--app-header-typography-3-size`.\n * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.\n * NOTE: Only use one of the exported `--app-header-typography--lineheight` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-lineheight`.\n * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.\n * NOTE: Only use one of the exported `--app-header-typography--tracking` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-tracking`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-text01`.\n /\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /\n Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n /\n @Prop({reflect: true})\n stuck = false;\n\n /\n Set the hero image source for the header.\n * You can also use a [slot=\"hero\"] node for advanced customization.\n /\n @Prop()\n hero: string;\n\n /\n Should place an overlay over the hero image.\n * Useful for legibility purpose.\n /\n @Prop({reflect: true})\n overlay = false;\n\n /\n Control menu bar position in the header.\n * - auto: the menu bar is positioned near the title\n * - stack: the menu bar is positioned below the title\n * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n /\n @Prop({reflect: true})\n flow: \"auto\" \| \"stack\" \| \"offcanvas\" = \"auto\";\n\n /\n The opening state of the drawer.\n /\n @Prop({reflect: true})\n drawerOpen = false;\n\n /\n Enable the search bar.\n /\n @Prop({reflect: true})\n enableSearch = false;\n\n /\n Placeholder text for the search bar.\n /\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /\n Search string for the search bar.\n /\n @Prop({mutable: true})\n searchString = \"\";\n\n /\n Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n /\n @Prop()\n searchPageUrl: string;\n\n /\n The stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current viewport.\n * Used to change the aspect of the search button (icon only) on mobile and tablet.\n /\n @State()\n private currentViewport: \"mobile\" \| \"tablet\" \| \"desktop\" = \"mobile\";\n\n /\n Current count of menu items.\n /\n @State()\n menuLength: number;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n private container?: HTMLDivElement;\n\n private menuElements?: NodeListOf<HTMLElement>;\n\n private observer?: IntersectionObserver =\n SUPPORT_INTERSECTION_OBSERVER &&\n new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {\n threshold: 0.5,\n }\n );\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n }\n\n @Listen(\"resize\", {target: \"window\", passive: true})\n evaluateViewport(): void {\n if (window.innerWidth < 768) {\n this.currentViewport = \"mobile\";\n } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n this.currentViewport = \"tablet\";\n } else {\n this.currentViewport = \"desktop\";\n }\n }\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n const elements = this.menuElements;\n elements.forEach((element) => {\n (element as HTMLZMenuElement).open = false;\n (element as HTMLZMenuElement).floating = !this.drawerOpen;\n (element as HTMLZMenuElement).verticalContext = this.drawerOpen;\n });\n }\n\n private get title(): string {\n const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n if (titleElement === null) {\n return \"\";\n }\n\n return titleElement.textContent.trim();\n }\n\n private get scrollParent(): Window \| Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body \|\| parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return this.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n }\n\n private get canShowSearchbar(): boolean {\n if (!this.enableSearch) {\n return false;\n }\n\n // Always show the searchbar on desktop, even if a searchPageUrl is set\n if (this.searchPageUrl) {\n return this.currentViewport === \"desktop\";\n }\n\n return true;\n }\n\n /\n Whether the header has a hero image, either as a prop or as a slot.\n */\n private get hasHero(): boolean {\n return !!this.hero \|\| this.hostElement.querySelector(\"[slot=hero]\") !== null;\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n }\n\n private collectMenuElements(): void {\n const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuLength = menuElements.length;\n this.setMenuFloatingMode();\n }\n\n private enableStuckObserver(): void {\n if (this.observer) {\n this.observer.observe(this.container);\n }\n }\n\n private disableStuckMode(): void {\n this._stuck = false;\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n @Watch(\"stuck\")\n onStuckMode(): void {\n if (this.stuck) {\n this.enableStuckObserver();\n } else {\n this.disableStuckMode();\n }\n }\n\n private renderSearchLinkButton(): HTMLZButtonElement \| null {\n if (!this.enableSearch \|\| !this.searchPageUrl \|\| this.currentViewport === \"desktop\") {\n return null;\n }\n\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n ></z-button>\n );\n }\n\n private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={searchButtonIconOnly}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n componentDidLoad(): void {\n this.collectMenuElements();\n this.onStuckMode();\n this.evaluateViewport();\n }\n\n render(): HTMLZAppHeaderElement {\n return (\n <Host menu-length={this.menuLength}>\n {this.hasHero && (\n <div class=\"hero-container\">\n <slot name=\"hero\">\n {this.hero && (\n <img\n alt=\"\"\n src={this.hero}\n />\n )}\n </slot>\n </div>\n )}\n\n <div\n class=\"heading-panel\"\n ref={(el) => (this.container = el)}\n >\n <div class=\"heading-container\">\n <div class=\"heading-subtitle\">\n <slot name=\"top-subtitle\"></slot>\n </div>\n <div class=\"heading-title\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <slot name=\"title\"></slot>\n\n {this.renderSearchLinkButton()}\n </div>\n\n <div class=\"heading-subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n\n {(this.canShowMenu \|\| this.canShowSearchbar) && (\n <div class=\"menu-container\">\n {this.canShowMenu && (\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n )}\n\n {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n </div>\n )}\n </div>\n\n <z-offcanvas\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n >\n <button\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\"></z-icon>\n </button>\n\n <div\n class=\"drawer-content\"\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n </div>\n </z-offcanvas>\n\n {this._stuck && (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <div class=\"heading-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n\n {this.renderSearchLinkButton()}\n {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/z-app-header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, h, Element, Prop, State, Watch, Host, Event, EventEmitter, Listen} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/*\n @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-height - Defaults to `auto`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.\n * @cssprop --app-header-title-font-size - Variable to customize the title's font size.\n * NOTE: Only use one of the exported `--app-header-typography--size` as a value.\n Defaults to `--app-header-typography-3-size`.\n * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.\n * NOTE: Only use one of the exported `--app-header-typography--lineheight` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-lineheight`.\n * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.\n * NOTE: Only use one of the exported `--app-header-typography--tracking` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-tracking`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n /\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /\n Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n /\n @Prop({reflect: true})\n stuck = false;\n\n /\n Set the hero image source for the header.\n * You can also use a [slot=\"hero\"] node for advanced customization.\n /\n @Prop()\n hero: string;\n\n /\n Should place an overlay over the hero image.\n * Useful for legibility purpose.\n /\n @Prop({reflect: true})\n overlay = false;\n\n /\n Control menu bar position in the header.\n * - auto: the menu bar is positioned near the title\n * - stack: the menu bar is positioned below the title\n * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n /\n @Prop({reflect: true})\n flow: \"auto\" \| \"stack\" \| \"offcanvas\" = \"auto\";\n\n /\n The opening state of the drawer.\n /\n @Prop({reflect: true})\n drawerOpen = false;\n\n /\n Enable the search bar.\n /\n @Prop({reflect: true})\n enableSearch = false;\n\n /\n Placeholder text for the search bar.\n /\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /\n Search string for the search bar.\n /\n @Prop({mutable: true})\n searchString = \"\";\n\n /\n Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n /\n @Prop()\n searchPageUrl: string;\n\n /\n The stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current viewport.\n * Used to change the aspect of the search button (icon only) on mobile and tablet.\n /\n @State()\n private currentViewport: \"mobile\" \| \"tablet\" \| \"desktop\" = \"mobile\";\n\n /\n Current count of menu items.\n /\n @State()\n menuLength: number;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n private container?: HTMLDivElement;\n\n private menuElements?: NodeListOf<HTMLElement>;\n\n private observer?: IntersectionObserver =\n SUPPORT_INTERSECTION_OBSERVER &&\n new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {\n threshold: 0.5,\n }\n );\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n }\n\n @Listen(\"resize\", {target: \"window\", passive: true})\n evaluateViewport(): void {\n if (window.innerWidth < 768) {\n this.currentViewport = \"mobile\";\n } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n this.currentViewport = \"tablet\";\n } else {\n this.currentViewport = \"desktop\";\n }\n }\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n const elements = this.menuElements;\n elements.forEach((element) => {\n (element as HTMLZMenuElement).open = false;\n (element as HTMLZMenuElement).floating = !this.drawerOpen;\n (element as HTMLZMenuElement).verticalContext = this.drawerOpen;\n });\n }\n\n private get title(): string {\n const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n if (titleElement === null) {\n return \"\";\n }\n\n return titleElement.textContent.trim();\n }\n\n private get scrollParent(): Window \| Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body \|\| parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return this.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n }\n\n private get canShowSearchbar(): boolean {\n if (!this.enableSearch) {\n return false;\n }\n\n // Always show the searchbar on desktop, even if a searchPageUrl is set\n if (this.searchPageUrl) {\n return this.currentViewport === \"desktop\";\n }\n\n return true;\n }\n\n /\n Whether the header has a hero image, either as a prop or as a slot.\n */\n private get hasHero(): boolean {\n return !!this.hero \|\| this.hostElement.querySelector(\"[slot=hero]\") !== null;\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n }\n\n private collectMenuElements(): void {\n const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuLength = menuElements.length;\n this.setMenuFloatingMode();\n }\n\n private enableStuckObserver(): void {\n if (this.observer) {\n this.observer.observe(this.container);\n }\n }\n\n private disableStuckMode(): void {\n this._stuck = false;\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n @Watch(\"stuck\")\n onStuckMode(): void {\n if (this.stuck) {\n this.enableStuckObserver();\n } else {\n this.disableStuckMode();\n }\n }\n\n private renderSearchLinkButton(): HTMLZButtonElement \| null {\n if (!this.enableSearch \|\| !this.searchPageUrl \|\| this.currentViewport === \"desktop\") {\n return null;\n }\n\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n ></z-button>\n );\n }\n\n private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={searchButtonIconOnly}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n componentDidLoad(): void {\n this.collectMenuElements();\n this.onStuckMode();\n this.evaluateViewport();\n }\n\n render(): HTMLZAppHeaderElement {\n return (\n <Host menu-length={this.menuLength}>\n {this.hasHero && (\n <div class=\"hero-container\">\n <slot name=\"hero\">\n {this.hero && (\n <img\n alt=\"\"\n src={this.hero}\n />\n )}\n </slot>\n </div>\n )}\n\n <div\n class=\"heading-panel\"\n ref={(el) => (this.container = el)}\n >\n <div class=\"heading-container\">\n <div class=\"heading-subtitle\">\n <slot name=\"top-subtitle\"></slot>\n </div>\n <div class=\"heading-title\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <slot name=\"title\"></slot>\n\n {this.renderSearchLinkButton()}\n </div>\n\n <div class=\"heading-subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n\n {(this.canShowMenu \|\| this.canShowSearchbar) && (\n <div class=\"menu-container\">\n {this.canShowMenu && (\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n )}\n\n {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n </div>\n )}\n </div>\n\n <z-offcanvas\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n >\n <button\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\"></z-icon>\n </button>\n\n <div\n class=\"drawer-content\"\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n </div>\n </z-offcanvas>\n\n {this._stuck && (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <div class=\"heading-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n\n {this.renderSearchLinkButton()}\n {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -50,7 +50,7 @@
   --app-header-stucked-bg: var(--color-surface01);
   /* Variable to customize text and icon color. */
-  --app-header-text-color: var(--color-text01);
+  --app-header-text-color: var(--color-default-text);
   /* Variable to customize the title's font size.
   NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. */
@@ -67,7 +67,7 @@
   --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);
   /* Variable to customize stuck header's text and icon color. */
-  --app-header-stucked-text-color: var(--color-text01);
+  --app-header-stucked-text-color: var(--color-default-text);
   position: relative;
   display: block;

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

@@ -9,7 +9,7 @@
   display: inline-flex;
   flex-direction: column;
-  --z-menu-label-color: var(--color-text01);
+  --z-menu-label-color: var(--color-default-text);
 }
 ::slotted(a) {
@@ -17,7 +17,7 @@
 }
 ::slotted(*) {
-  color: var(--color-text01);
+  color: var(--color-default-text);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }

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

@@ -18,7 +18,7 @@
 }
 ::slotted(*) {
-  color: var(--color-text01);
+  color: var(--color-default-text);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
@@ -90,7 +90,7 @@ when placed below the real text using `flex-direction: column`. */
 .label z-icon {
   margin-left: calc(var(--space-unit) * 4);
-  fill: var(--color-icon02);
+  fill: var(--color-default-icon);
 }
 .items {

package/dist/collection/components/notification/z-info-box/styles.css CHANGED Viewed

@@ -12,7 +12,7 @@
 }
 :host > div > slot {
-  color: var(--color-text01);
+  color: var(--color-default-text);
   font-size: 14px;
 }

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

@@ -79,7 +79,7 @@
 .content-text {
   max-width: 800px;
-  color: var(--color-text01);
+  color: var(--color-default-text);
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);
   letter-spacing: 0.16px;

package/dist/collection/components/notification/z-toast-notification/styles.css CHANGED Viewed

@@ -205,7 +205,7 @@
 :host > #external-container.light #icon,
 :host > #external-container.warning #text,
 :host > #external-container.warning #icon {
-  fill: var(--color-icon01);
+  fill: var(--color-primary01-icon);
 }
 :host > #external-container.light #text,

package/dist/collection/components/notification/z-tooltip/styles.css CHANGED Viewed

@@ -1,6 +1,6 @@
 :host {
   --z-tooltip-theme--surface: var(--color-surface01);
-  --z-tooltip-theme--text: var(--color-text01);
+  --z-tooltip-theme--text: var(--color-default-text);
   --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));
 }

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

@@ -14,19 +14,13 @@ export class ZPanelElem {
         this.isdisabled = false;
         this.descrSlotName = undefined;
     }
-    renderIcon() {
-        if (this.isdisabled) {
-            return (h("img", { src: this.imgurl, alt: this.imgalt }));
-        }
-        return (h("a", { class: "elem-icon", href: this.url, target: this.target }, h("img", { src: this.imgurl, alt: this.imgalt })));
-    }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: 'ef6db6ad212d9675eca3c713a1b4f91cd18f78e0', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { "aria-hidden": "true", class: "panel-elem-icon" }, this.renderIcon())), h("div", { key: '3735e07d1d2f29df948cc305a0dc03f8f18bf136', class: "panel-elem-link" }, h("a", { key: '4ddfc8fa8ee168e4b92bf7a8c2c13bc3c3b365c5', class: {
+        return (h("div", { key: 'bdc30d88a3eb7ba48958701df00b9ef7e8516bba', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'fe7f4ba7d0851986d693be0a88b463cedabb5934', class: "panel-elem-link" }, h("a", { key: '7325188fe40d6a2726d542607581b1517e6d5b3b', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'fe5d6af74bba6f36ef4b5458c51e3e4b4d17db54', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { class: "panel-elem-desc" }, h("slot", { name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'df0f7f98e88de69f4894bfa8250a884aa6da9c3a', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { class: "panel-elem-desc" }, h("slot", { name: this.descrSlotName })))));
     }
     static get is() { return "z-panel-elem"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/panel/z-panel-elem/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/panel/z-panel-elem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;GAEG;AAOH,MAAM,OAAO,UAAU;;;;;;;;sBA2BH,QAAQ;0BAIH,KAAK;;;~~IAMpB~~,~~UAAU;QAChB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,CACL,WACE,GAAG,EAAE,IAAI,CAAC,~~MAAM~~,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,GAChB,CACH,CAAC~~;QACJ,~~CAAC;QAED,OAAO,CACL,SACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,~~MAAM,~~EAAE,IAAI,CAAC,~~MAAM~~;YAEnB~~,~~WACE,~~GAAG,~~EAAE,~~IAAI,CAAC,MAAM,~~EAChB,GAAG,EAAE,IAAI,~~CAAC,~~MAAM,GAChB,CACA,CACL,~~CAAC~~;IACJ~~,CAAC~~;IAED~~,~~MAAM;QACJ,MAAM,MAAM,GAAG,~~IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,~~IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,~~EAAE,CAAC;QAE9C,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB;YAC9B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAC/B,0BACc,MAAM,EAClB,KAAK,EAAC,iBAAiB,~~IAEtB~~,IAAI,CAAC,~~UAAU~~,EAAE,~~CACd~~,CACP;YACD,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,0DACE,KAAK,EAAE;wBACL,QAAQ,EAAE,IAAI;wBACd,iBAAiB,EAAE,IAAI,CAAC,UAAU;wBAClC,aAAa,EAAE,IAAI;qBACpB,EACD,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM;oBAEnB,+DACE,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,IAAI,EAAE,IAAI,CAAC,QAAQ,GACX;oBACT,IAAI,CAAC,SAAS,CACb,CACA;YACL,IAAI,CAAC,aAAa,IAAI,CACrB,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,YAAM,IAAI,EAAE,IAAI,CAAC,aAAa,GAAI,CAC9B,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 private renderIcon(): HTMLZIconElement {\n if (this.isdisabled) {\n return (\n <img\n src={this.imgurl}\n alt={this.imgalt}\n />\n );\n }\n\n return (\n <a\n class=\"elem-icon\"\n href={this.url}\n target={this.target}\n >\n <img\n src={this.imgurl}\n alt={this.imgalt}\n />\n </a>\n );\n }\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 {this.~~renderIcon()~~}\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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/panel/z-panel-elem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;GAEG;AAOH,MAAM,OAAO,UAAU;;;;;;;;sBA2BH,QAAQ;0BAIH,KAAK;;;IAM5B,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAE9C,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB;YAC9B,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAC/B,0BACc,MAAM,EAClB,KAAK,EAAC,iBAAiB;gBAEvB,WACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,GAChB,CACE,CACP;YACD,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,0DACE,KAAK,EAAE;wBACL,QAAQ,EAAE,IAAI;wBACd,iBAAiB,EAAE,IAAI,CAAC,UAAU;wBAClC,aAAa,EAAE,IAAI;qBACpB,EACD,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM;oBAEnB,+DACE,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,IAAI,EAAE,IAAI,CAAC,QAAQ,GACX;oBACT,IAAI,CAAC,SAAS,CACb,CACA;YACL,IAAI,CAAC,aAAa,IAAI,CACrB,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,YAAM,IAAI,EAAE,IAAI,CAAC,aAAa,GAAI,CAC9B,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/panel/z-panel-elem/index.spec.js CHANGED Viewed

@@ -117,9 +117,7 @@ describe("Suite test ZPanelElem", () => {
       <z-panel-elem imgurl="exampleImgUrl" linkicon="example" elemid="example" linklabel="label" url="http://www.google.it">
           <div class="panel-elem-container">
           <div aria-hidden="true" class="panel-elem-icon">
-            <a class="elem-icon" href="http://www.google.it" target="_blank">
-              <img src="exampleImgUrl" />
-            </a>
+            <img src="exampleImgUrl" />
           </div>
           <div class="panel-elem-link">
             <a class="z-link z-link-icon" href="http://www.google.it" id="examplelink_id" target="_blank">
@@ -140,9 +138,7 @@ describe("Suite test ZPanelElem", () => {
       <z-panel-elem imgurl="exampleImgUrl" target="_self" linkicon="example" elemid="example" linklabel="label" url="http://www.google.it">
           <div class="panel-elem-container">
           <div aria-hidden="true" class="panel-elem-icon">
-            <a class="elem-icon" href="http://www.google.it" target="_self">
-              <img src="exampleImgUrl" />
-            </a>
+            <img src="exampleImgUrl" />
           </div>
           <div class="panel-elem-link">
             <a class="z-link z-link-icon" href="http://www.google.it" id="examplelink_id" target="_self">
@@ -163,9 +159,7 @@ describe("Suite test ZPanelElem", () => {
       <z-panel-elem imgalt="exampleDesc" linkicon="example" elemid="example" linklabel="label" url="http://www.google.it">
           <div class="panel-elem-container">
           <div aria-hidden="true" class="panel-elem-icon">
-            <a class="elem-icon" href="http://www.google.it" target="_blank">
-              <img alt="exampleDesc" />
-            </a>
+            <img alt="exampleDesc" />
           </div>
           <div class="panel-elem-link">
             <a class="z-link z-link-icon" href="http://www.google.it" id="examplelink_id" target="_blank">
@@ -186,9 +180,7 @@ describe("Suite test ZPanelElem", () => {
       <z-panel-elem imgalt="exampleDesc" target="_self" linkicon="example" elemid="example" linklabel="label" url="http://www.google.it">
           <div class="panel-elem-container">
           <div aria-hidden="true" class="panel-elem-icon">
-            <a class="elem-icon" href="http://www.google.it" target="_self">
-              <img alt="exampleDesc" />
-            </a>
+            <img alt="exampleDesc" />
           </div>
           <div class="panel-elem-link">
             <a class="z-link z-link-icon" href="http://www.google.it" id="examplelink_id" target="_self">
@@ -209,9 +201,7 @@ describe("Suite test ZPanelElem", () => {
       <z-panel-elem descr-slot-name="slotname" imgurl="exampleUrl" target="_self" linkicon="example" elemid="example" linklabel="label" url="http://www.google.it">
           <div class="panel-elem-container">
           <div aria-hidden="true" class="panel-elem-icon">
-            <a class="elem-icon" href="http://www.google.it" target="_self">
-              <img src="exampleUrl" />
-            </a>
+            <img src="exampleUrl" />
           </div>
           <div class="panel-elem-link">
             <a class="z-link z-link-icon" href="http://www.google.it" id="examplelink_id" target="_self">
@@ -237,9 +227,7 @@ describe("Suite test ZPanelElem", () => {
         </div>
         <div class="panel-elem-container">
           <div aria-hidden="true" class="panel-elem-icon">
-            <a class="elem-icon" href="http://www.google.it" target="_self">
-              <img src="exampleUrl" />
-            </a>
+            <img src="exampleUrl" />
           </div>
           <div class="panel-elem-link">
             <a class="z-link z-link-icon" href="http://www.google.it" id="examplelink_id" target="_self">

package/dist/collection/components/panel/z-panel-elem/index.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/panel/z-panel-elem/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZPanelElem} from \"./index\";\n\ndescribe(\"Suite test ZPanelElem\", () => {\n it(\"Test render ZPanelElem vuoto\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem>\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" id=\"link_id\" target=\"_blank\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with only mandatory params\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"link_id\" target=\"_blank\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with elemid\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" id=\"examplelink_id\" href=\"http://www.google.it\" id=\"link_id\" target=\"_blank\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with elemid and isdisabled\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem isdisabled elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem isdisabled elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-disabled z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with target=_self\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem target=\"_self\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem target=\"_self\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with linkicon\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgurl\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem imgurl=\"exampleImgUrl\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem imgurl=\"exampleImgUrl\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <a class=\"elem-icon\" href=\"http://www.google.it\" target=\"_blank\">\n <img src=\"exampleImgUrl\" />\n </a>\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgurl and target=_self\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem imgurl=\"exampleImgUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem imgurl=\"exampleImgUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <a class=\"elem-icon\" href=\"http://www.google.it\" target=\"_self\">\n <img src=\"exampleImgUrl\" />\n </a>\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgalt\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem imgalt=\"exampleDesc\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem imgalt=\"exampleDesc\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <a class=\"elem-icon\" href=\"http://www.google.it\" target=\"_blank\">\n <img alt=\"exampleDesc\" />\n </a>\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgalt and target=_self\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem imgalt=\"exampleDesc\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem imgalt=\"exampleDesc\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <a class=\"elem-icon\" href=\"http://www.google.it\" target=\"_self\">\n <img alt=\"exampleDesc\" />\n </a>\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with icon and slot name\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem descr-slot-name=\"slotname\" imgurl=\"exampleUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\"></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem descr-slot-name=\"slotname\" imgurl=\"exampleUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <a class=\"elem-icon\" href=\"http://www.google.it\" target=\"_self\">\n <img src=\"exampleUrl\" />\n </a>\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n <div class=\"panel-elem-desc\">\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with icon and complete slot data\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem descrSlotName=\"slotname\" imgurl=\"exampleUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ><div class=\"panel-elem-desc\"> <span slot=\"slotname\">Full application description</span> </div></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem descrslotname=\"slotname\" imgurl=\"exampleUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-desc\">\n <span slot=\"slotname\">Full application description</span>\n </div>\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <a class=\"elem-icon\" href=\"http://www.google.it\" target=\"_self\">\n <img src=\"exampleUrl\" />\n </a>\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgurl and isdisabled\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem isdisabled imgurl=\"exampleImgUrl\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem isdisabled imgurl=\"exampleImgUrl\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img src=\"exampleImgUrl\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon z-link-disabled\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgalt and isdisabled\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem isdisabled imgalt=\"exampleAlt\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" target=\"_self\"></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem isdisabled imgalt=\"exampleAlt\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" target=\"_self\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img alt=\"exampleAlt\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon z-link-disabled\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n});\n"]}
1	+ {"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/panel/z-panel-elem/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZPanelElem} from \"./index\";\n\ndescribe(\"Suite test ZPanelElem\", () => {\n it(\"Test render ZPanelElem vuoto\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem>\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" id=\"link_id\" target=\"_blank\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with only mandatory params\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"link_id\" target=\"_blank\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with elemid\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" id=\"examplelink_id\" href=\"http://www.google.it\" id=\"link_id\" target=\"_blank\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with elemid and isdisabled\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem isdisabled elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem isdisabled elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-disabled z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with target=_self\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem target=\"_self\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem target=\"_self\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with linkicon\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgurl\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem imgurl=\"exampleImgUrl\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem imgurl=\"exampleImgUrl\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img src=\"exampleImgUrl\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgurl and target=_self\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem imgurl=\"exampleImgUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem imgurl=\"exampleImgUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img src=\"exampleImgUrl\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgalt\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem imgalt=\"exampleDesc\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem imgalt=\"exampleDesc\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img alt=\"exampleDesc\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgalt and target=_self\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem imgalt=\"exampleDesc\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem imgalt=\"exampleDesc\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img alt=\"exampleDesc\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with icon and slot name\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem descr-slot-name=\"slotname\" imgurl=\"exampleUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\"></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem descr-slot-name=\"slotname\" imgurl=\"exampleUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img src=\"exampleUrl\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n <div class=\"panel-elem-desc\">\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with icon and complete slot data\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem descrSlotName=\"slotname\" imgurl=\"exampleUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ><div class=\"panel-elem-desc\"> <span slot=\"slotname\">Full application description</span> </div></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem descrslotname=\"slotname\" imgurl=\"exampleUrl\" target=\"_self\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-desc\">\n <span slot=\"slotname\">Full application description</span>\n </div>\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img src=\"exampleUrl\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgurl and isdisabled\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem isdisabled imgurl=\"exampleImgUrl\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" ></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem isdisabled imgurl=\"exampleImgUrl\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img src=\"exampleImgUrl\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon z-link-disabled\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_blank\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n\n it(\"Test render ZPanelElem with imgalt and isdisabled\", async () => {\n const page = await newSpecPage({\n components: [ZPanelElem],\n html: `<z-panel-elem isdisabled imgalt=\"exampleAlt\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" target=\"_self\"></z-panel-elem>`,\n });\n\n expect(page.root).toEqualHtml(`\n <z-panel-elem isdisabled imgalt=\"exampleAlt\" linkicon=\"example\" elemid=\"example\" linklabel=\"label\" url=\"http://www.google.it\" target=\"_self\">\n <div class=\"panel-elem-container\">\n <div aria-hidden=\"true\" class=\"panel-elem-icon\">\n <img alt=\"exampleAlt\" />\n </div>\n <div class=\"panel-elem-link\">\n <a class=\"z-link z-link-icon z-link-disabled\" href=\"http://www.google.it\" id=\"examplelink_id\" target=\"_self\">\n <z-icon height=\"14\" name=\"example\" width=\"14\"></z-icon>\n label\n </a>\n </div>\n </div>\n </z-panel-elem>\n `);\n });\n});\n"]}

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

@@ -7,10 +7,10 @@ import { ControlSize, AccordionVariant } from "../../beans";
  * @slot tag - Slot for tags.
  * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
  * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
- * @cssprop --z-accordion-label-color - Label color. Default: `--color-text01`.
+ * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
  * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
  * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
- * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-text01`.
+ * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
  * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
  * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
  * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
@@ -47,7 +47,7 @@ export class ZAccordion {
         this.toggled.emit(this.open);
     }
     render() {
-        return (h("details", { key: 'df8ab3183d7dee036891420e1ca4b58ea8186972', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'c4160d5af242307bc85cd4fbe055b6646aa065b8', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '1802dd7e1b6384c69527e0d4cf65881f4810f88c', class: "z-accordion-label" }, this.label), h("span", { key: '38244c63af937be53bb3fb2e54f225239ce2b9f9', class: "z-accordion-tags" }, h("slot", { key: '2cacb7ab9947c006b50de586065b2a77868dbb11', name: "tag" })), h("z-icon", { key: 'd9936dc9e899a176a3e929758f36cdd5f278b50e', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content", part: "content" }, h("slot", null)))));
+        return (h("details", { key: 'a1a71f7848714200cb7257e52f5fc33eb5c138a8', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '6d54c14ad248b2b10a7483b4c4bbb7d551f0cc1d', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'e5c9bb595f5ff65ede8d0094172e8779b85023db', class: "z-accordion-label" }, this.label), h("span", { key: 'b48e9f6e1dca9c00c9f85a8a6960a774a07f1287', class: "z-accordion-tags" }, h("slot", { key: '9c9300a51a7b484c9e34dd48ad88f0e81909f13a', name: "tag" })), h("z-icon", { key: '1394de17280c4a42735ab0f839a3ad967d0f27e2', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content", part: "content" }, h("slot", null)))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,cACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACnD,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd;gBACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,WACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,eAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Event, EventEmitter, Watch} from \"@stencil/core\";\nimport {ControlSize, AccordionVariant} from \"../../beans\";\n\n/*\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-~~text01~~`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-~~text01~~`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n <span class=\"z-accordion-tags\">\n <slot name=\"tag\" />\n </span>\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAID;;;;OAIG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,gEACE,GAAG,EAAE,CAAC,GAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI;YAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACrC,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,IAAI,IAAI,CACZ,cACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH;gBACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACnD,6DAAM,KAAK,EAAC,kBAAkB;oBAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd;gBACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAC/C,CACM;YACT,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,WACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS;gBAEd,eAAQ,CACJ,CACP,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Event, EventEmitter, Watch} from \"@stencil/core\";\nimport {ControlSize, AccordionVariant} from \"../../beans\";\n\n/*\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n <span class=\"z-accordion-tags\">\n <slot name=\"tag\" />\n </span>\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"]}

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

@@ -7,10 +7,10 @@
 :host {
   --z-accordion-highlight-color: transparent;
   --z-accordion-bg: var(--color-surface01);
-  --z-accordion-label-color: var(--color-text01);
+  --z-accordion-label-color: var(--color-default-text);
   --z-accordion-disabled-label-color: var(--color-text03);
   --z-accordion-content-bg: var(--color-surface01);
-  --z-accordion-content-fg: var(--color-text01);
+  --z-accordion-content-fg: var(--color-default-text);
   --z-accordion-hover-color: var(--color-surface03);
   --z-accordion-left-padding: calc(var(--space-unit) * 2);
   --z-accordion-right-padding: var(--space-unit);

package/dist/collection/components/z-anchor-navigation/styles.css CHANGED Viewed

@@ -45,7 +45,7 @@ z-anchor-navigation nav * a:not(:only-child) {
 z-anchor-navigation nav > * {
   position: relative;
   border-left: var(--border-size-large) solid var(--color-surface04);
-  color: var(--color-text01);
+  color: var(--color-default-text);
   font-family: var(--font-family-sans);
   transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
 }
@@ -77,7 +77,7 @@ z-anchor-navigation nav z-icon {
   display: flex;
   padding: calc(var(--space-unit) * 1.5);
-  fill: var(--color-icon02);
+  fill: var(--color-default-icon);
 }
 @media (min-width: 768px) {

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

@@ -88,7 +88,7 @@ export class ZBookCard {
     }
     renderRibbon() {
         const content = [
-            this.ribbonIcon && (h("z-icon", { name: this.ribbonIcon, width: 16, height: 16, fill: "color-icon03" })),
+            this.ribbonIcon && (h("z-icon", { name: this.ribbonIcon, width: 16, height: 16, fill: "color-inverse-icon" })),
             h("span", null, this.ribbon),
         ];
         return this.ribbonInteractive ? (h("button", { class: "ribbon interactive", onClick: () => this.emitRibbonClick() }, content)) : (h("div", { class: "ribbon" }, content));
@@ -124,7 +124,7 @@ export class ZBookCard {
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '0be831c7e7f9c9cc2684610dd8015d46820ce07d', class: {
+        return (h("article", { key: '101c9922d8f9405fc38fb79f36fbf0d608327064', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));