@zanichelli/albe-web-components 12.1.3-rc.0 → 12.1.3

package/dist/components/z-breadcrumb.js

@@ -1,291 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { V as BreadcrumbPathStyle, W as BreadcrumbHomepageVariant, p as Device, P as PopoverPosition, g as KeyboardCode, i as ListSize } from './index2.js';
-import { g as getDevice, h as handleKeyboardSubmit } from './utils.js';
-import { d as defineCustomElement$7 } from './index6.js';
-import { d as defineCustomElement$6 } from './index9.js';
-import { d as defineCustomElement$5 } from './index12.js';
-import { d as defineCustomElement$4 } from './index13.js';
-import { d as defineCustomElement$3 } from './index14.js';
-import { d as defineCustomElement$2 } from './index25.js';
-
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;height:30px;align-items:center;padding-left:calc(var(--space-unit) / 2);overflow-x:hidden}li{display:flex;align-items:baseline}:host a:focus,:host button:focus{box-shadow:var(--shadow-focus-primary);outline:0}:host a{color:var(--color-link-primary);font-size:var(--font-size-2);text-decoration:none;white-space:nowrap}:host a.homepage-icon{display:list-item}:host a.homepage-text{display:initial;margin-top:calc(var(--space-unit) / 4);margin-right:var(--space-unit)}:host a.missing-path{color:var(--color-text01)}:host a.text-ellipsis{display:-webkit-box !important;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:normal}:host ol{display:flex;padding:0;margin:0;list-style-type:none}:host ol>li:not(:first-child,:last-child){margin-right:var(--space-unit)}nav.underlined>ol>li a:not(.missing-path),nav.underlined>ol>li button{text-decoration:underline}nav.semibold>ol>li a:not(.missing-path),nav.semibold>ol>li button{font-weight:var(--font-sb)}:host z-icon{margin-right:var(--space-unit);--z-icon-width:12px;--z-icon-height:12px}:host button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}:host .hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}:host .hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}:host .hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}:host .hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}:host .full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}:host .tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){:host ol>li+li::before{display:inline-block;width:10px;height:10px;flex:1;margin-right:2px;color:var(--color-disabled03);content:\"\\203A\"}:host a.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}";
-const ZBreadcrumbStyle0 = stylesCss;
-
-const ZBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class ZBreadcrumb extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.clickOnNode = createEvent(this, "clickOnNode", 7);
-        this.collapsedElements = [];
-        this.currentIndex = 0;
-        this.truncatePosition = null;
-        this.pathStyle = BreadcrumbPathStyle.UNDERLINED;
-        this.homepageVariant = BreadcrumbHomepageVariant.ICON;
-        this.maxNodesToShow = 5;
-        this.preventFollowUrl = false;
-        this.overflowMenuItemRows = 0;
-        this.truncateChar = 30;
-        this.viewPortWidth = undefined;
-        this.hasOverflow = false;
-        this.popoverEllipsisOpen = false;
-    }
-    handleResize() {
-        this.viewPortWidth = getDevice();
-        if (this.viewPortWidth !== Device.MOBILE &&
-            this.wrapElement &&
-            this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
-            this.hasOverflow = true;
-        }
-    }
-    // eslint-disable-next-line lines-between-class-members
-    handlePropChange() {
-        this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
-    }
-    handleResizeUp(newValue, oldValue) {
-        if (newValue === Device.MOBILE ||
-            (oldValue === Device.MOBILE && newValue === Device.TABLET) ||
-            (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||
-            (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||
-            (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||
-            (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||
-            (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)) {
-            this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
-        }
-    }
-    componentWillLoad() {
-        this.viewPortWidth = getDevice();
-        this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
-    }
-    componentWillRender() {
-        if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {
-            this.checkEllipsisOrOverflowMenu();
-            this.hasOverflow = false;
-        }
-    }
-    componentDidRender() {
-        if (this.collapsedElementsRef) {
-            this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"));
-        }
-        if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
-            this.hasOverflow = true;
-        }
-    }
-    initializeBreadcrumb(isMobile) {
-        if (isMobile) {
-            this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);
-        }
-        else {
-            this.pathsList = this.getPathsItemsList();
-        }
-        this.totalLenght = this.pathsList.length;
-        this.homepageNode = this.pathsList.shift();
-        this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));
-        this.collapsedElements = [];
-        if (this.totalLenght > this.maxNodesToShow) {
-            this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);
-        }
-    }
-    checkEllipsisOrOverflowMenu() {
-        if (this.pathListCopy.length > 0) {
-            for (let i = 0; i < this.pathsList.length; i++) {
-                if (this.pathsList[i].text.length > this.truncateChar) {
-                    if (this.truncatePosition !== null) {
-                        if (this.truncatePosition > 0) {
-                            const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);
-                            arrayToPush.forEach((item) => {
-                                this.collapsedElements.push(item);
-                            });
-                            this.pathsList.splice(0, this.truncatePosition);
-                            this.truncatePosition = 0;
-                            return;
-                        }
-                        if (this.truncatePosition === 0) {
-                            const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);
-                            this.collapsedElements.push(...arrayToPush);
-                            this.pathsList.splice(0, this.truncatePosition + 1);
-                            this.truncatePosition = null;
-                            return;
-                        }
-                    }
-                    if (i !== this.pathsList.length - 1) {
-                        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);
-                        this.currentEllipsisText = this.pathsList[i].text;
-                        this.pathsList[i].text = truncatedString;
-                        this.pathsList[i].hasTooltip = true;
-                        this.truncatePosition = i;
-                        return;
-                    }
-                }
-            }
-        }
-    }
-    truncateWithEllipsis(str, length) {
-        const ending = "&mldr;";
-        if (str.length > length) {
-            return str.substring(0, length - 1) + ending;
-        }
-        return str;
-    }
-    getPathsItemsList() {
-        return Array.from(this.hostElement.children).map((item) => {
-            return {
-                text: item.textContent,
-                path: item.href,
-                hasTooltip: false,
-            };
-        });
-    }
-    renderMobileBreadcrumb() {
-        const lastPath = this.pathsList[this.pathsList.length - 1];
-        return (h("nav", { "aria-label": "Breadcrumb", class: {
-                underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-                semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
-            } }, h("ol", null, this.renderNode(lastPath, true))));
-    }
-    renderHomepageNode(item) {
-        return (h("li", null, h("a", { class: {
-                "homepage-icon": this.homepageVariant === BreadcrumbHomepageVariant.ICON,
-                "homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
-            }, href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item) }, this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (h("z-icon", { name: "home", fill: "color-link-primary", height: 16, width: 16 })) : ("Home"))));
-    }
-    renderNode(item, mobile) {
-        return (h("li", null, item.hasTooltip && (h("z-popover", { class: "full-path-tooltip", "bind-to": this.triggerEllipsis, open: this.popoverEllipsisOpen, position: PopoverPosition.BOTTOM_RIGHT, closable: false, showArrow: true }, h("span", { class: "tooltip-content" }, this.currentEllipsisText))), h("a", { class: {
-                "missing-path": !item.path,
-                "text-ellipsis": mobile,
-            }, ref: (val) => (this.triggerEllipsis = val), "aria-current": item.path ? undefined : "page", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onMouseOver: () => {
-                if (item.hasTooltip) {
-                    this.popoverEllipsisOpen = true;
-                }
-            }, onMouseLeave: () => {
-                if (item.hasTooltip) {
-                    this.popoverEllipsisOpen = false;
-                }
-            }, innerHTML: mobile ? `<z-icon fill="color-link-primary" name="chevron-left"></z-icon>${item.text}` : item.text })));
-    }
-    renderBreadcrumb() {
-        return (h("nav", { ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
-                underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-                semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
-            } }, h("ol", null, this.renderHomepageNode(this.homepageNode), this.collapsedElements.length ? this.renderOverflowMenu() : "", this.pathsList.map((item) => this.renderNode(item, false)))));
-    }
-    togglePopover() {
-        if (!this.collapsedElementsRef.open) {
-            this.collapsedElementsRef.open = true;
-        }
-    }
-    handlePreventFollowUrl(e, item) {
-        if (this.preventFollowUrl) {
-            e.preventDefault();
-            this.clickOnNode.emit(item.path);
-        }
-    }
-    handleOverflowMenuAccessibility(e) {
-        const anchorElementsLenght = this.anchorElements.length;
-        if (e.key === KeyboardCode.TAB) {
-            e.preventDefault();
-            return;
-        }
-        e.stopPropagation();
-        const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
-        if (arrows.includes(e.key)) {
-            e.preventDefault();
-            if (e.key === KeyboardCode.ARROW_DOWN) {
-                this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;
-            }
-            if (e.key === KeyboardCode.ARROW_UP) {
-                this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;
-            }
-            this.anchorElements[this.currentIndex].focus();
-        }
-        if (e.key === KeyboardCode.ESC) {
-            this.triggerButton.focus();
-        }
-    }
-    renderOverflowMenu() {
-        if (this.collapsedElements.length) {
-            return (h("li", null, h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), "bind-to": this.triggerButton, position: PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, h("div", { class: "popover-content" }, h("z-list", null, h("z-list-group", { size: ListSize.SMALL }, this.collapsedElements.map((item, index, array) => {
-                return (h("div", null, h("z-list-element", { clickable: true }, h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e) }, item.text)), index < array.length - 1 && h("z-divider", { color: "color-surface03" })));
-            }))))), h("button", { "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", ref: (el) => (this.triggerButton = el), class: "dots", onClick: () => {
-                    this.togglePopover();
-                }, onKeyDown: (e) => {
-                    handleKeyboardSubmit(e, this.togglePopover.bind(this));
-                    setTimeout(() => {
-                        this.anchorElements[0].focus();
-                    }, 100);
-                } }, "...")));
-        }
-    }
-    render() {
-        return (h(Host, { key: '0fdd2556f767ddc969bb26ad157149092c28976f', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "maxNodesToShow": ["handlePropChange"],
-        "viewPortWidth": ["handleResizeUp"]
-    }; }
-    static get style() { return ZBreadcrumbStyle0; }
-}, [1, "z-breadcrumb", {
-        "pathStyle": [513, "path-style"],
-        "homepageVariant": [1, "homepage-variant"],
-        "maxNodesToShow": [2, "max-nodes-to-show"],
-        "preventFollowUrl": [4, "prevent-follow-url"],
-        "overflowMenuItemRows": [2, "overflow-menu-item-rows"],
-        "truncateChar": [2, "truncate-char"],
-        "viewPortWidth": [32],
-        "hasOverflow": [32],
-        "popoverEllipsisOpen": [32]
-    }, [[9, "resize", "handleResize"]], {
-        "maxNodesToShow": ["handlePropChange"],
-        "viewPortWidth": ["handleResizeUp"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-breadcrumb", "z-divider", "z-icon", "z-list", "z-list-element", "z-list-group", "z-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-breadcrumb":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZBreadcrumb$1);
-            }
-            break;
-        case "z-divider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "z-list":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "z-list-element":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-list-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZBreadcrumb = ZBreadcrumb$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZBreadcrumb, defineCustomElement };
-
-//# sourceMappingURL=z-breadcrumb.js.map

package/dist/components/z-breadcrumb.js.map

@@ -1 +0,0 @@
-{"file":"z-breadcrumb.js","mappings":"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","names":["ZBreadcrumb"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --line-clamp-popover: 0;\n  --line-clamp-mobile: 1;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nnav {\n  display: flex;\n  height: 30px;\n  align-items: center;\n  padding-left: calc(var(--space-unit) / 2);\n  overflow-x: hidden;\n}\n\nli {\n  display: flex;\n  align-items: baseline;\n}\n\n:host a:focus,\n:host button:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: 0;\n}\n\n:host a {\n  color: var(--color-link-primary);\n  font-size: var(--font-size-2);\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n:host a.homepage-icon {\n  display: list-item;\n}\n\n:host a.homepage-text {\n  display: initial;\n  margin-top: calc(var(--space-unit) / 4);\n  margin-right: var(--space-unit);\n}\n\n:host a.missing-path {\n  color: var(--color-text01);\n}\n\n:host a.text-ellipsis {\n  display: -webkit-box !important;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--line-clamp-mobile);\n  text-overflow: ellipsis;\n  white-space: normal;\n}\n\n:host ol {\n  display: flex;\n  padding: 0;\n  margin: 0;\n  list-style-type: none;\n}\n\n:host ol > li:not(:first-child, :last-child) {\n  margin-right: var(--space-unit);\n}\n\nnav.underlined > ol > li a:not(.missing-path),\nnav.underlined > ol > li button {\n  text-decoration: underline;\n}\n\nnav.semibold > ol > li a:not(.missing-path),\nnav.semibold > ol > li button {\n  font-weight: var(--font-sb);\n}\n\n:host z-icon {\n  margin-right: var(--space-unit);\n\n  --z-icon-width: 12px;\n  --z-icon-height: 12px;\n}\n\n:host button.dots {\n  display: inline-block;\n  color: var(--color-link-primary);\n  cursor: pointer;\n}\n\n:host .hidden-paths-popover .popover-content {\n  max-width: 302px;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  text-align: left;\n}\n\n:host .hidden-paths-popover .popover-content a {\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\n:host .hidden-paths-popover {\n  --z-popover-theme--surface: var(--color-surface02);\n  --z-popover-padding: 0;\n}\n\n:host .hidden-paths-popover::before,\n.full-path-tooltip::before {\n  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n:host .full-path-tooltip {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-padding: 0;\n}\n\n:host .tooltip-content {\n  padding: 0 var(--space-unit);\n  font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n  /* https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/#accessibilityfeatures */\n  :host ol > li + li::before {\n    display: inline-block;\n    width: 10px;\n    height: 10px;\n    flex: 1;\n    margin-right: 2px;\n    color: var(--color-disabled03);\n    content: \"\\203A\";\n  }\n\n  :host a.text-ellipsis {\n    -webkit-line-clamp: var(--line-clamp-popover);\n  }\n}\n","import {Component, Prop, h, State, Host, Listen, Element, Event, Watch, EventEmitter} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n    }\n  }\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private triggerEllipsis: HTMLAnchorElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private totalLenght: number;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n      this.hasOverflow = true;\n    }\n  }\n\n  private initializeBreadcrumb(isMobile: boolean): void {\n    if (isMobile) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.totalLenght = this.pathsList.length;\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));\n    this.collapsedElements = [];\n    if (this.totalLenght > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    if (this.pathListCopy.length > 0) {\n      for (let i = 0; i < this.pathsList.length; i++) {\n        if (this.pathsList[i].text.length > this.truncateChar) {\n          if (this.truncatePosition !== null) {\n            if (this.truncatePosition > 0) {\n              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);\n              arrayToPush.forEach((item) => {\n                this.collapsedElements.push(item);\n              });\n              this.pathsList.splice(0, this.truncatePosition);\n              this.truncatePosition = 0;\n\n              return;\n            }\n            if (this.truncatePosition === 0) {\n              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);\n              this.collapsedElements.push(...arrayToPush);\n              this.pathsList.splice(0, this.truncatePosition + 1);\n              this.truncatePosition = null;\n\n              return;\n            }\n          }\n          if (i !== this.pathsList.length - 1) {\n            const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n            this.currentEllipsisText = this.pathsList[i].text;\n            this.pathsList[i].text = truncatedString;\n            this.pathsList[i].hasTooltip = true;\n            this.truncatePosition = i;\n\n            return;\n          }\n        }\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, length: number): string {\n    const ending = \"&mldr;\";\n\n    if (str.length > length) {\n      return str.substring(0, length - 1) + ending;\n    }\n\n    return str;\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderMobileBreadcrumb(): HTMLDivElement {\n    const lastPath = this.pathsList[this.pathsList.length - 1];\n\n    return (\n      <nav\n        aria-label=\"Breadcrumb\"\n        class={{\n          underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n        }}\n      >\n        <ol>{this.renderNode(lastPath, true)}</ol>\n      </nav>\n    );\n  }\n\n  private renderHomepageNode(item): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-icon\": this.homepageVariant === BreadcrumbHomepageVariant.ICON,\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={item.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n        >\n          {this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (\n            <z-icon\n              name=\"home\"\n              fill=\"color-link-primary\"\n              height={16}\n              width={16}\n            />\n          ) : (\n            \"Home\"\n          )}\n        </a>\n      </li>\n    );\n  }\n\n  private renderNode(item, mobile): HTMLLIElement {\n    return (\n      <li>\n        {item.hasTooltip && (\n          <z-popover\n            class=\"full-path-tooltip\"\n            bind-to={this.triggerEllipsis}\n            open={this.popoverEllipsisOpen}\n            position={PopoverPosition.BOTTOM_RIGHT}\n            closable={false}\n            showArrow\n          >\n            <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n          </z-popover>\n        )}\n        <a\n          class={{\n            \"missing-path\": !item.path,\n            \"text-ellipsis\": mobile,\n          }}\n          ref={(val) => (this.triggerEllipsis = val)}\n          aria-current={item.path ? undefined : \"page\"}\n          href={item.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n          onMouseOver={() => {\n            if (item.hasTooltip) {\n              this.popoverEllipsisOpen = true;\n            }\n          }}\n          onMouseLeave={() => {\n            if (item.hasTooltip) {\n              this.popoverEllipsisOpen = false;\n            }\n          }}\n          innerHTML={mobile ? `<z-icon fill=\"color-link-primary\" name=\"chevron-left\"></z-icon>${item.text}` : item.text}\n        />\n      </li>\n    );\n  }\n\n  private renderBreadcrumb(): HTMLElement {\n    return (\n      <nav\n        ref={(val) => (this.wrapElement = val)}\n        aria-label=\"Breadcrumb\"\n        class={{\n          underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n        }}\n      >\n        <ol>\n          {this.renderHomepageNode(this.homepageNode)}\n          {this.collapsedElements.length ? this.renderOverflowMenu() : \"\"}\n          {this.pathsList.map((item) => this.renderNode(item, false))}\n        </ol>\n      </nav>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    if (this.collapsedElements.length) {\n      return (\n        <li>\n          <z-popover\n            class=\"hidden-paths-popover\"\n            ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n            bind-to={this.triggerButton}\n            position={PopoverPosition.BOTTOM_RIGHT}\n            closable={true}\n            showArrow\n          >\n            <div class=\"popover-content\">\n              <z-list>\n                <z-list-group size={ListSize.SMALL}>\n                  {this.collapsedElements.map((item, index, array) => {\n                    return (\n                      <div>\n                        <z-list-element clickable>\n                          <a\n                            class=\"text-ellipsis\"\n                            href={item.path}\n                            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                            onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          >\n                            {item.text}\n                          </a>\n                        </z-list-element>\n                        {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                      </div>\n                    );\n                  })}\n                </z-list-group>\n              </z-list>\n            </div>\n          </z-popover>\n          <button\n            aria-label=\"Mostra più breadcrumb\"\n            aria-haspopup=\"true\"\n            ref={(el) => (this.triggerButton = el as HTMLButtonElement)}\n            class=\"dots\"\n            onClick={() => {\n              this.togglePopover();\n            }}\n            onKeyDown={(e) => {\n              handleKeyboardSubmit(e, this.togglePopover.bind(this));\n              setTimeout(() => {\n                this.anchorElements[0].focus();\n              }, 100);\n            }}\n          >\n            ...\n          </button>\n        </li>\n      );\n    }\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        {this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-button-sort.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZButtonSort extends Components.ZButtonSort, HTMLElement {}
-export const ZButtonSort: {
-    prototype: ZButtonSort;
-    new (): ZButtonSort;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-button-sort.js

@@ -1,86 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { t as tabletBreakpoint } from './breakpoints.js';
-import { d as defineCustomElement$2 } from './index9.js';
-
-const stylesCss = "button{display:flex;max-width:100%;height:36px;align-items:center;padding:0 var(--space-unit);border:var(--border-size-medium) solid var(--color-primary01);background-color:var(--color-surface01);border-radius:var(--border-radius);color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);outline:none}button::-moz-focus-inner{border:0}button:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary);fill:var(--color-hover-primary)}button:focus{border-color:var(--color-primary01);box-shadow:var(--shadow-focus-primary);color:var(--color-primary01);fill:var(--color-primary01)}button:active{border-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary);fill:var(--color-pressed-primary)}button.selected{border-color:var(--color-active-primary);background-color:var(--color-active-primary);color:var(--color-text-inverse);fill:var(--color-text-inverse)}button>span.ellipsis{overflow:hidden;padding:0;margin:0;text-overflow:ellipsis;white-space:nowrap}button>span.counter{margin-right:calc(var(--space-unit) * 2);margin-left:calc(var(--space-unit) / 2)}button>span.sort{margin-right:calc(var(--space-unit) / 2);white-space:nowrap}button>span{margin-right:calc(var(--space-unit) / 2)}@media (min-width: 768px){button{max-width:325px}}@media (min-width: 1152px){button{max-width:490px}}";
-const ZButtonSortStyle0 = stylesCss;
-
-const ZButtonSort$1 = /*@__PURE__*/ proxyCustomElement(class ZButtonSort extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.buttonSortClick = createEvent(this, "buttonSortClick", 7);
-        this.buttonid = undefined;
-        this.label = undefined;
-        this.desclabel = undefined;
-        this.counter = undefined;
-        this.sortlabelasc = "A-Z";
-        this.sortlabeldesc = "Z-A";
-        this.isselected = false;
-        this.sortasc = true;
-        this.allowTooltip = false;
-    }
-    emitButtonSortClick() {
-        if (!this.isselected) {
-            this.isselected = true;
-        }
-        else {
-            this.sortasc = !this.sortasc;
-        }
-        this.buttonSortClick.emit({
-            buttonid: this.buttonid,
-            sortAsc: this.sortasc,
-        });
-    }
-    componentDidLoad() {
-        if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {
-            this.allowTooltip = true;
-        }
-    }
-    setButtonTitle() {
-        return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : "";
-    }
-    elementHasEllipsis() {
-        return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
-    }
-    render() {
-        return (h("button", { key: '5876e75ffbf8c14eb2e5a9cf2fd30b50ec34dd50', title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, h("span", { key: '35932e480eaa525e80ddb8ffbe7d99d428a474ce', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '11c32835bfff43546c08699fea6118f183f373fa', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'a722b2e5aa1a21252acdde0a71a34ff94189618d', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: '0dffff94ee662b6784eae03bd32a2dbb714eb39e', name: "caret-up-down", width: 16, height: 16 })));
-    }
-    static get style() { return ZButtonSortStyle0; }
-}, [1, "z-button-sort", {
-        "buttonid": [1],
-        "label": [1],
-        "desclabel": [1],
-        "counter": [2],
-        "sortlabelasc": [1],
-        "sortlabeldesc": [1],
-        "isselected": [1028],
-        "sortasc": [1028],
-        "allowTooltip": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-button-sort", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-button-sort":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZButtonSort$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZButtonSort = ZButtonSort$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZButtonSort, defineCustomElement };
-
-//# sourceMappingURL=z-button-sort.js.map

package/dist/components/z-button-sort.js.map

@@ -1 +0,0 @@
-{"file":"z-button-sort.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,g6CAAg6C,CAAC;AACn7C,0BAAe,SAAS;;MCMXA,aAAW;;;;;;;;;;4BAmBE,KAAK;6BAIJ,KAAK;0BAIP,KAAK;uBAIR,IAAI;4BAGT,KAAK;;IAQZ,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;KACJ;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,gBAAgB,EAAE;YACrE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;KACF;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;KACjF;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,+DACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,UAAU,EACpC,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,IAEzC,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,EACpD,KAAK,EAAC,UAAU,IAEf,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CACzD,EACP,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,OAAO,GAAG,CAAQ,EACnE,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAQ,EACjF,+DACE,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZButtonSort"],"sources":["src/components/buttons/z-button-sort/styles.css?tag=z-button-sort&encapsulation=shadow","src/components/buttons/z-button-sort/index.tsx"],"sourcesContent":["button {\n  display: flex;\n  max-width: 100%;\n  height: 36px;\n  align-items: center;\n  padding: 0 var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-primary01);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  outline: none;\n}\n\nbutton::-moz-focus-inner {\n  border: 0;\n}\n\nbutton:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nbutton:focus {\n  border-color: var(--color-primary01);\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\nbutton:active {\n  border-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n  fill: var(--color-pressed-primary);\n}\n\nbutton.selected {\n  border-color: var(--color-active-primary);\n  background-color: var(--color-active-primary);\n  color: var(--color-text-inverse);\n  fill: var(--color-text-inverse);\n}\n\nbutton > span.ellipsis {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nbutton > span.counter {\n  margin-right: calc(var(--space-unit) * 2);\n  margin-left: calc(var(--space-unit) / 2);\n}\n\nbutton > span.sort {\n  margin-right: calc(var(--space-unit) / 2);\n  white-space: nowrap;\n}\n\nbutton > span {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  button {\n    max-width: 325px;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  button {\n    max-width: 490px;\n  }\n}\n","import {Component, Prop, State, h, Event, EventEmitter} from \"@stencil/core\";\nimport {tabletBreakpoint} from \"../../../constants/breakpoints\";\n@Component({\n  tag: \"z-button-sort\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZButtonSort {\n  /** id, should be unique */\n  @Prop()\n  buttonid: string;\n\n  /** label content (ascending) */\n  @Prop()\n  label: string;\n\n  /** label content (descending) */\n  @Prop()\n  desclabel?: string;\n\n  /** occurrences counter (optional) */\n  @Prop()\n  counter?: number;\n\n  /** sort label content (ascending) (optional) */\n  @Prop()\n  sortlabelasc?: string = \"A-Z\";\n\n  /** sort label content (descending) (optional) */\n  @Prop()\n  sortlabeldesc?: string = \"Z-A\";\n\n  /** selected flag (optional) */\n  @Prop({mutable: true})\n  isselected?: boolean = false;\n\n  /** sortable flag (optional) */\n  @Prop({mutable: true})\n  sortasc?: boolean = true;\n\n  @State()\n  allowTooltip = false;\n\n  private ellipsis?: HTMLSpanElement;\n\n  /** sorting direction click event, returns `buttonid` and `sortAsc` */\n  @Event()\n  buttonSortClick: EventEmitter;\n\n  private emitButtonSortClick(): void {\n    if (!this.isselected) {\n      this.isselected = true;\n    } else {\n      this.sortasc = !this.sortasc;\n    }\n    this.buttonSortClick.emit({\n      buttonid: this.buttonid,\n      sortAsc: this.sortasc,\n    });\n  }\n\n  componentDidLoad(): void {\n    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint) {\n      this.allowTooltip = true;\n    }\n  }\n\n  private setButtonTitle(): string {\n    return this.allowTooltip ? `${this.sortasc ? this.label : this.desclabel}` : \"\";\n  }\n\n  private elementHasEllipsis(): boolean {\n    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        title={this.setButtonTitle()}\n        id={this.buttonid}\n        class={this.isselected && \"selected\"}\n        onClick={() => this.emitButtonSortClick()}\n      >\n        <span\n          ref={(el) => (this.ellipsis = el as HTMLSpanElement)}\n          class=\"ellipsis\"\n        >\n          {!this.sortasc && this.desclabel ? this.desclabel : this.label}\n        </span>\n        <span class=\"counter\">{this.counter && ` (${this.counter})`}</span>\n        <span class=\"sort\">{this.sortasc ? this.sortlabelasc : this.sortlabeldesc}</span>\n        <z-icon\n          name=\"caret-up-down\"\n          width={16}\n          height={16}\n        />\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZButton extends Components.ZButton, HTMLElement {}
-export const ZButton: {
-    prototype: ZButton;
-    new (): ZButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-button.js

@@ -1,8 +0,0 @@
-import { Z as ZButton$1, d as defineCustomElement$1 } from './index4.js';
-
-const ZButton = ZButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZButton, defineCustomElement };
-
-//# sourceMappingURL=z-button.js.map

package/dist/components/z-button.js.map

@@ -1 +0,0 @@
-{"file":"z-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-card.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZCard extends Components.ZCard, HTMLElement {}
-export const ZCard: {
-    prototype: ZCard;
-    new (): ZCard;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-card.js

@@ -1,83 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { C as CardVariant } from './index2.js';
-import { d as defineCustomElement$2 } from './index9.js';
-
-const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;--z-card--text-padding:calc(var(--space-unit) * 2) var(--space-unit);position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"title\"])::before{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;content:\"\"}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;color:inherit;font-size:inherit;font-weight:var(--font-sb);-webkit-line-clamp:2;text-decoration:none}::slotted([slot=\"text\"]){margin:0;-webkit-line-clamp:3}.actions{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 2)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible)::before{box-shadow:var(--shadow-focus-primary)}:host([clickable]) ::slotted([slot=\"title\"]:focus:focus-visible){box-shadow:none !important;outline:none !important}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([show-shadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:var(--z-card--text-padding)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([show-shadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][show-shadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][show-shadow]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][show-shadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
-const ZCardStyle0 = stylesCss;
-
-const ZCard$1 = /*@__PURE__*/ proxyCustomElement(class ZCard extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.variant = undefined;
-        this.coverIcon = undefined;
-        this.showShadow = false;
-        this.clickable = false;
-        this.hasCoverImage = undefined;
-    }
-    componentWillLoad() {
-        this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
-    }
-    /**
-     * Template for a card without image cover.
-     * A colored background replaces the image and some data is moved over it.
-     */
-    renderColorCoverCard() {
-        return [
-            h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
-            h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
-        ];
-    }
-    /**
-     * Template for the content div.
-     */
-    renderContentDiv() {
-        return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
-    }
-    render() {
-        if (this.variant === CardVariant.TEXT) {
-            return h(Host, null, this.renderContentDiv());
-        }
-        if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
-            return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
-                h("slot", { name: "cover" }),
-                this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
-            ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
-        }
-        return h(Host, null, this.renderColorCoverCard());
-    }
-    get host() { return this; }
-    static get style() { return ZCardStyle0; }
-}, [1, "z-card", {
-        "variant": [513],
-        "coverIcon": [1, "cover-icon"],
-        "showShadow": [516, "show-shadow"],
-        "clickable": [516],
-        "hasCoverImage": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-card", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZCard$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZCard = ZCard$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZCard, defineCustomElement };
-
-//# sourceMappingURL=z-card.js.map

package/dist/components/z-card.js.map

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

package/dist/components/z-carousel.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZCarousel extends Components.ZCarousel, HTMLElement {}
-export const ZCarousel: {
-    prototype: ZCarousel;
-    new (): ZCarousel;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;