@zanichelli/albe-web-components 7.0.0 → 7.1.0

package/dist/types/components/navigation/z-link/index.d.ts

@@ -1,40 +1,40 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-/**
- * @slot - link content
- */
-export declare class ZLink {
-  /** link id (optional) */
-  htmlid?: string;
-  /** link url (optional) */
-  href?: string;
-  /** link target (optional) */
-  target?: string;
-  /** tabindex link attribute (optional) */
-  htmltabindex?: number;
-  /** disable link flag (optional) */
-  isdisabled?: boolean;
-  /** active link flag (optional) */
-  isactive?: boolean;
-  /** white variant flag (optional) */
-  iswhite?: boolean;
-  /** link text variant (optional) */
-  textcolor?: "primary" | "inverse" | "white" | "black";
-  /** link icon name (optional) */
-  icon?: string;
-  /** big link version */
-  big?: boolean;
-  /** link icon position (optional) */
-  iconposition?: "left" | "right";
-  /** draw underline on text (optional) */
-  underline?: boolean;
-  /** emitted on link click, returns linkId */
-  zLinkClick: EventEmitter;
-  hostElement: HTMLZLinkElement;
-  iconSize: number;
-  constructor();
-  componentWillLoad(): void;
-  private emitZLinkClick;
-  private emitZLinkInteraction;
-  componentDidLoad(): void;
-  render(): HTMLAnchorElement;
-}
+import { EventEmitter } from "../../../stencil-public-runtime";
+/**
+ * @slot - link content
+ */
+export declare class ZLink {
+  /** link id (optional) */
+  htmlid?: string;
+  /** link url (optional) */
+  href?: string;
+  /** link target (optional) */
+  target?: string;
+  /** tabindex link attribute (optional) */
+  htmltabindex?: number;
+  /** disable link flag (optional) */
+  isdisabled?: boolean;
+  /** active link flag (optional) */
+  isactive?: boolean;
+  /** white variant flag (optional) */
+  iswhite?: boolean;
+  /** link text variant (optional) */
+  textcolor?: "primary" | "inverse" | "white" | "black";
+  /** link icon name (optional) */
+  icon?: string;
+  /** big link version */
+  big?: boolean;
+  /** link icon position (optional) */
+  iconposition?: "left" | "right";
+  /** draw underline on text (optional) */
+  underline?: boolean;
+  /** emitted on link click, returns linkId */
+  zLinkClick: EventEmitter;
+  hostElement: HTMLZLinkElement;
+  iconSize: number;
+  constructor();
+  componentWillLoad(): void;
+  private emitZLinkClick;
+  private emitZLinkInteraction;
+  componentDidLoad(): void;
+  render(): HTMLAnchorElement;
+}

package/dist/types/components/navigation/z-menu/index.d.ts

@@ -1,52 +1,60 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-/**
- * @slot - Menu label
- * @slot header - Header to display as the first entry of the open menu.
- * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.
- */
-export declare class ZMenu {
-  /** Flag to set the active status of the menu. */
-  active?: boolean;
-  /**
-   * Flag to set the display mode of the list.
-   * If true, the list will be absolutely positioned under the menu label,
-   * stacked beneath it otherwise.
-   * @default false
-   */
-  floating?: boolean;
-  /**
-   * The opening state of the menu.
-   * @default false
-   */
-  open: boolean;
-  hasHeader: boolean;
-  hasContent: boolean;
-  hostElement: HTMLZMenuElement;
-  private content;
-  private raf;
-  /** The menu has been opened. */
-  opened: EventEmitter;
-  /** The menu has been closed. */
-  closed: EventEmitter;
-  private toggle;
-  /** Close the floating list when a click is performed outside of this Element. */
-  handleClick(ev: MouseEvent): void;
-  onOpenChanged(): void;
-  constructor();
-  componentWillLoad(): void;
-  /**
-   * Correctly set position of the floating menu in order to prevent overflow.
-   * @param live Should run the method on every refresh frame.
-   */
-  private reflow;
-  /**
-   * Check if some content slot is set.
-   */
-  private checkContent;
-  /**
-   * Set `menuitem` role to all menu items.
-   */
-  private onItemsChange;
-  private renderMenuLabel;
-  render(): HTMLZMenuElement;
-}
+import { EventEmitter } from "../../../stencil-public-runtime";
+/**
+ * @slot - Menu label
+ * @slot header - Header to display as the first entry of the open menu.
+ * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.
+ */
+export declare class ZMenu {
+  hostElement: HTMLZMenuElement;
+  /** Flag to set the active status of the menu. */
+  active?: boolean;
+  /**
+   * Flag to set the display mode of the list.
+   * If true, the list will be absolutely positioned under the menu label,
+   * stacked beneath it otherwise.
+   */
+  floating?: boolean;
+  /** The opening state of the menu. */
+  open: boolean;
+  /**
+   * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).
+   * A small border is placed under it as a separator from other elements.
+   */
+  verticalContext: boolean;
+  hasHeader: boolean;
+  hasContent: boolean;
+  private content;
+  /** Animation frame request id. */
+  private raf;
+  /** The menu has been opened. */
+  opened: EventEmitter;
+  /** The menu has been closed. */
+  closed: EventEmitter;
+  private toggle;
+  /** Close the floating list when a click is performed outside of this Element. */
+  handleClick(ev: MouseEvent): void;
+  onOpenChanged(): void;
+  constructor();
+  componentWillLoad(): void;
+  /**
+   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+   * @param ev Slotchange event
+   */
+  private onLabelSlotChange;
+  /**
+   * Correctly set position of the floating menu in order to prevent overflow.
+   * @param live Should run the method on every refresh frame.
+   */
+  private reflow;
+  /**
+   * Check if some content slot is set.
+   */
+  private checkContent;
+  /**
+   * Set `menuitem` role to all menu items.
+   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
+   */
+  private onItemsChange;
+  private renderMenuLabel;
+  render(): HTMLZMenuElement;
+}

package/dist/types/components/navigation/z-menu-section/index.d.ts

@@ -1,25 +1,31 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-/**
- * @slot - Menu section label
- * @slot item - Single entry of the section. Can be slotted multiple times to insert items.
- */
-export declare class ZMenuSection {
-  /** Active state */
-  active?: boolean;
-  open: boolean;
-  hasContent: boolean;
-  hostElement: HTMLZMenuSectionElement;
-  /** The section has been opened. */
-  opened: EventEmitter;
-  /** The section has been closed. */
-  closed: EventEmitter;
-  private toggle;
-  /** Close the list when a click is performed outside of this Element. */
-  handleClick(ev: MouseEvent): void;
-  /**
-   * Check if some content slot is set.
-   */
-  private checkContent;
-  componentWillLoad(): void;
-  render(): HTMLZMenuSectionElement;
-}
+import { EventEmitter } from "../../../stencil-public-runtime";
+/**
+ * A component to create submenus inside the ZMenu.
+ * @slot - Label of the menu section.
+ * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.
+ */
+export declare class ZMenuSection {
+  hostElement: HTMLZMenuSectionElement;
+  /** Active state */
+  active?: boolean;
+  open: boolean;
+  hasContent: boolean;
+  /** The section has been opened. */
+  opened: EventEmitter;
+  /** The section has been closed. */
+  closed: EventEmitter;
+  private toggle;
+  /** Close the list when a click is performed outside of this Element. */
+  handleClick(ev: MouseEvent): void;
+  /**
+   * Check if some content slot is set.
+   */
+  private checkContent;
+  /**
+   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+   * @param ev Slotchange event
+   */
+  private onLabelSlotChange;
+  componentWillLoad(): void;
+  render(): HTMLZMenuSectionElement;
+}

package/dist/types/components/notification/z-info-box/index.d.ts

@@ -1,14 +1,14 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-/**
- * @slot content - set the info box content
- */
-export declare class ZInfoBox {
-  /** info box unique id */
-  boxid: string;
-  /** render close icon flag */
-  isclosable: boolean;
-  /** emitted on close icon click */
-  infoBoxClose: EventEmitter;
-  private emitInfoBoxClose;
-  render(): HTMLDivElement;
-}
+import { EventEmitter } from "../../../stencil-public-runtime";
+/**
+ * @slot content - set the info box content
+ */
+export declare class ZInfoBox {
+  /** info box unique id */
+  boxid: string;
+  /** render close icon flag */
+  isclosable: boolean;
+  /** emitted on close icon click */
+  infoBoxClose: EventEmitter;
+  private emitInfoBoxClose;
+  render(): HTMLDivElement;
+}

package/dist/types/components/notification/z-notification/index.d.ts

@@ -1,32 +1,32 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-import { NotificationType } from "../../../beans";
-/**
- * Notification bar component.
- * @slot - The text of the notification.
- * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
- */
-export declare class ZNotification {
-  /** Name of the icon on the left of the content */
-  contenticonname?: string;
-  /** Action button text */
-  actiontext?: string;
-  /** Alert variant type */
-  type: NotificationType;
-  /** Enable close icon */
-  showclose?: boolean;
-  /**
-   * Enable shadow.
-   * @deprecated shadow is available only for the `sticky` version of the notification.
-   */
-  showshadow?: boolean;
-  /** Enable sticky notification bar. */
-  sticky?: boolean;
-  /** Call to action clicked */
-  notificationAction: EventEmitter;
-  private handleActionButtonClick;
-  /** Close button clicked */
-  notificationClose: EventEmitter;
-  private handleCloseButtonClick;
-  constructor();
-  render(): HTMLZNotificationElement;
-}
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { NotificationType } from "../../../beans";
+/**
+ * Notification bar component.
+ * @slot - The text of the notification.
+ * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.
+ */
+export declare class ZNotification {
+  /** Name of the icon on the left of the content */
+  contenticonname?: string;
+  /** Action button text */
+  actiontext?: string;
+  /** Alert variant type */
+  type: NotificationType;
+  /** Enable close icon */
+  showclose?: boolean;
+  /**
+   * Enable shadow.
+   * @deprecated shadow is available only for the `sticky` version of the notification.
+   */
+  showshadow?: boolean;
+  /** Enable sticky notification bar. */
+  sticky?: boolean;
+  /** Call to action clicked */
+  notificationAction: EventEmitter;
+  private handleActionButtonClick;
+  /** Close button clicked */
+  notificationClose: EventEmitter;
+  private handleCloseButtonClick;
+  constructor();
+  render(): HTMLZNotificationElement;
+}

package/dist/types/components/notification/z-toast-notification/index.d.ts

@@ -1,56 +1,56 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
-import { ToastNotificationTransition, ToastNotification } from "../../../beans";
-export declare class ZToastNotification {
-  hostElement: HTMLZToastNotificationElement;
-  /** toast notification's title */
-  heading?: string;
-  /** toast notification's message */
-  message: string;
-  /** toggles closing button rendering */
-  closebutton: boolean;
-  /** toast notification closing timeout (ms) */
-  autoclose?: number;
-  /** toast notification autoclose can be paused */
-  pauseonfocusloss?: boolean;
-  /** toast notification type:  dark, light, accent, error, success, warning*/
-  type?: ToastNotification;
-  /** toast notification can be draggable*/
-  isdraggable?: boolean;
-  /** toast notification draggable percentage*/
-  draggablepercentage?: number;
-  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/
-  transition?: ToastNotificationTransition;
-  percentage: number;
-  private isTextLong;
-  private container;
-  private toastText;
-  private sliderManager;
-  private elapsedTime;
-  private timeoutHandle;
-  private startTime;
-  private isMobile;
-  private isCloseEventCalled;
-  watchPropIsdraggable(newValue: boolean): void;
-  watchPropAutoclose(newValue: number): void;
-  watchPropPauseonfocusloss(newValue: boolean): void;
-  /** notification close event */
-  toastClose: EventEmitter;
-  private emitToastClose;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  private visibilityChangeEventHandler;
-  private validateAutoclose;
-  private mapSlideOutClass;
-  private calculateDraggedPercentage;
-  private handleSlideOutDragAnimation;
-  private onFocus;
-  private onBlur;
-  private startClosingTimeout;
-  private detectWrap;
-  private renderText;
-  private renderButton;
-  private renderCloseIcon;
-  private renderContainer;
-  private renderMobileContainer;
-  render(): HTMLZToastNotificationElement;
-}
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { ToastNotificationTransition, ToastNotification } from "../../../beans";
+export declare class ZToastNotification {
+  hostElement: HTMLZToastNotificationElement;
+  /** toast notification's title */
+  heading?: string;
+  /** toast notification's message */
+  message: string;
+  /** toggles closing button rendering */
+  closebutton: boolean;
+  /** toast notification closing timeout (ms) */
+  autoclose?: number;
+  /** toast notification autoclose can be paused */
+  pauseonfocusloss?: boolean;
+  /** toast notification type:  dark, light, accent, error, success, warning*/
+  type?: ToastNotification;
+  /** toast notification can be draggable*/
+  isdraggable?: boolean;
+  /** toast notification draggable percentage*/
+  draggablepercentage?: number;
+  /** toast notification animation type: slide-in-left, slide-in-right, slide-in-down, slide-in-up*/
+  transition?: ToastNotificationTransition;
+  percentage: number;
+  private isTextLong;
+  private container;
+  private toastText;
+  private sliderManager;
+  private elapsedTime;
+  private timeoutHandle;
+  private startTime;
+  private isMobile;
+  private isCloseEventCalled;
+  watchPropIsdraggable(newValue: boolean): void;
+  watchPropAutoclose(newValue: number): void;
+  watchPropPauseonfocusloss(newValue: boolean): void;
+  /** notification close event */
+  toastClose: EventEmitter;
+  private emitToastClose;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  private visibilityChangeEventHandler;
+  private validateAutoclose;
+  private mapSlideOutClass;
+  private calculateDraggedPercentage;
+  private handleSlideOutDragAnimation;
+  private onFocus;
+  private onBlur;
+  private startClosingTimeout;
+  private detectWrap;
+  private renderText;
+  private renderButton;
+  private renderCloseIcon;
+  private renderContainer;
+  private renderMobileContainer;
+  render(): HTMLZToastNotificationElement;
+}

package/dist/types/components/notification/z-tooltip/index.d.ts

@@ -1,26 +1,26 @@
-import { PopoverPosition } from "../../../beans";
-/**
- * Tooltip component.
- * It is basically a wrapper for the `<z-popover>` component with custom configuration.
- *
- * @cssprop --z-popover-theme--surface - background color of the popover.
- * @cssprop --z-popover-theme--text - foreground color of the popover.
- * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover.
- */
-export declare class ZTooltip {
-  /** Tooltip position. */
-  position: PopoverPosition;
-  /** Enable tooltip dark mode. */
-  dark: boolean;
-  /**
-   * The open state of the tooltip.
-   */
-  open: boolean;
-  /**
-   * The selector or the element bound with the tooltip.
-   */
-  bindTo?: string | HTMLElement;
-  private popover;
-  onPopoverOpenChange(): void;
-  render(): HTMLZPopoverElement;
-}
+import { PopoverPosition } from "../../../beans";
+/**
+ * Tooltip component.
+ * It is basically a wrapper for the `<z-popover>` component with custom configuration.
+ *
+ * @cssprop --z-popover-theme--surface - background color of the popover.
+ * @cssprop --z-popover-theme--text - foreground color of the popover.
+ * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover.
+ */
+export declare class ZTooltip {
+  /** Tooltip position. */
+  position: PopoverPosition;
+  /** Enable tooltip dark mode. */
+  dark: boolean;
+  /**
+   * The open state of the tooltip.
+   */
+  open: boolean;
+  /**
+   * The selector or the element bound with the tooltip.
+   */
+  bindTo?: string | HTMLElement;
+  private popover;
+  onPopoverOpenChange(): void;
+  render(): HTMLZPopoverElement;
+}

package/dist/types/components/panel/z-panel-elem/index.d.ts

@@ -1,25 +1,25 @@
-/**
- * @slot `descrSlotName` - description content
- */
-export declare class ZPanelElem {
-  /** html element id (optional) */
-  elemid?: string;
-  /** image url source (optional) */
-  imgurl?: string;
-  /** alternative image text (optional) */
-  imgalt?: string;
-  /** icon link name (optional) */
-  linkicon?: string;
-  /** link label text*/
-  linklabel: string;
-  /** link url */
-  url: string;
-  /** link target (optional) */
-  target?: string;
-  /** disabled status flag (optional) */
-  isdisabled?: boolean;
-  /** name of slot container (optional) */
-  descrSlotName?: string;
-  private renderIcon;
-  render(): HTMLDivElement;
-}
+/**
+ * @slot `descrSlotName` - description content
+ */
+export declare class ZPanelElem {
+  /** html element id (optional) */
+  elemid?: string;
+  /** image url source (optional) */
+  imgurl?: string;
+  /** alternative image text (optional) */
+  imgalt?: string;
+  /** icon link name (optional) */
+  linkicon?: string;
+  /** link label text*/
+  linklabel: string;
+  /** link url */
+  url: string;
+  /** link target (optional) */
+  target?: string;
+  /** disabled status flag (optional) */
+  isdisabled?: boolean;
+  /** name of slot container (optional) */
+  descrSlotName?: string;
+  private renderIcon;
+  render(): HTMLDivElement;
+}

package/dist/types/components/z-anchor-navigation/index.d.ts

@@ -1,39 +1,39 @@
-/**
- * * Anchor navigation component.
- * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.
- * @example
- * ```
- * <z-anchor-navigation>
- *  <div>
- *    <a href="#section-id">Section name</a>
- *    <button type="button">
- *      <z-icon name="share" />
- *    </button>
- *  </div>
- * </z-anchor-navigation>
- * ```
- */
-export declare class ZAnchorNavigation {
-  /**
-   * If enabled, the text of each anchor will be hidden unless
-   * for the current one or the one the user is hovering.
-   */
-  hideUnselected: boolean;
-  /**
-   * Whether the mobile list is collapsed.
-   */
-  collapsed: boolean;
-  /** Reference to the nav element. */
-  private nav;
-  /**
-   * Set aria-current attribute to the anchors and `current` to nav children.
-   */
-  private setAriaCurrent;
-  /**
-   * Toggle collapsed state.
-   */
-  private toggleCollapsed;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  render(): HTMLZAnchorNavigationElement;
-}
+/**
+ * * Anchor navigation component.
+ * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.
+ * @example
+ * ```
+ * <z-anchor-navigation>
+ *  <div>
+ *    <a href="#section-id">Section name</a>
+ *    <button type="button">
+ *      <z-icon name="share" />
+ *    </button>
+ *  </div>
+ * </z-anchor-navigation>
+ * ```
+ */
+export declare class ZAnchorNavigation {
+  /**
+   * If enabled, the text of each anchor will be hidden unless
+   * for the current one or the one the user is hovering.
+   */
+  hideUnselected: boolean;
+  /**
+   * Whether the mobile list is collapsed.
+   */
+  collapsed: boolean;
+  /** Reference to the nav element. */
+  private nav;
+  /**
+   * Set aria-current attribute to the anchors and `current` to nav children.
+   */
+  private setAriaCurrent;
+  /**
+   * Toggle collapsed state.
+   */
+  private toggleCollapsed;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): HTMLZAnchorNavigationElement;
+}

package/dist/types/components/z-aria-alert/index.d.ts

@@ -1,6 +1,6 @@
-import { ZAriaAlertMode } from "../../beans";
-export declare class ZAriaAlert {
-  /** Aria live mode */
-  mode: ZAriaAlertMode;
-  render(): HTMLZAriaAlertElement;
-}
+import { ZAriaAlertMode } from "../../beans";
+export declare class ZAriaAlert {
+  /** Aria live mode */
+  mode: ZAriaAlertMode;
+  render(): HTMLZAriaAlertElement;
+}