@patternfly/elements 2.0.5 → 2.2.0

package/pf-popover/pf-popover.css

@@ -0,0 +1,191 @@
+:host {
+  display: inline;
+  --_floating-arrow-size: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));
+  --_header-text-color: var(--pf-c-popover__title-text--Color, inherit);
+  --_header-icon-color: var(--pf-c-popover__title-icon--Color, var(--pf-global--Color--100, #151515));
+  --_animation-speed: var(--pf-popover--animation-speed, 300ms);
+  --_z-index: var(--pf-popover--z-index, 9999);
+}
+
+.visually-hidden {
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+#container {
+  display: inline-flex;
+  position: relative;
+}
+
+#trigger {
+  display: inline-block;
+  position: relative;
+}
+
+#arrow {
+  display: block;
+  position: absolute;
+  background-color: var(--pf-c-popover__arrow--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
+  box-shadow: var(
+    --pf-c-popover__arrow--BoxShadow,
+    var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
+  );
+  content: '';
+  height: var(--pf-c-popover__arrow--Height, var(--pf-global--arrow--width-lg, 1.5625rem));
+  width: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));
+  rotate: 45deg;
+  z-index: -1;
+  pointer-events: none;
+}
+
+#popover {
+  display: block;
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  transition: visibility 0s, opacity var(--_animation-speed) cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;
+  left: 0;
+  top: 0;
+  translate: var(--_floating-content-translate);
+  box-shadow: var(
+    --pf-c-popover--BoxShadow,
+    var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
+  );
+  border: 0;
+  padding: 0;
+  visibility: hidden;
+}
+
+#popover[open] {
+  opacity: 1;
+  z-index: var(--_z-index);
+  visibility: visible;
+}
+
+[part='content'] {
+  position: relative;
+  padding: var(--pf-c-popover__content--PaddingTop, var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-popover__content--PaddingRight, var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-popover__content--PaddingBottom, var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-popover__content--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  word-break: break-word;
+  line-height: var(--pf-c-popover--line-height, 1.5);
+  font-size: var(--pf-c-popover__content--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
+  color: var(--pf-c-popover__content--Color, var(--pf-global--Color--100, #151515));
+  background-color: var(--pf-c-popover__content--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
+  max-width: var(
+    --pf-c-popover--MaxWidth,
+    calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
+  );
+  min-width: var(
+    --pf-c-popover--MinWidth,
+    calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
+  );
+  width: max-content;
+}
+
+[part='close-button'] {
+  cursor: pointer;
+  position: absolute;
+  right: var(
+    --pf-c-popover--c-button--Right,
+    calc(var(--pf-c-popover__content--PaddingRight, 1rem) - var(--pf-global--spacer--md, 1rem))
+  );
+  top: var(
+    --pf-c-popover--c-button--Top,
+    calc(var(--pf-c-popover__content--PaddingTop, 1rem) - var(--pf-global--spacer--form-element, 0.375rem))
+  );
+}
+
+[part='content'] > [part='close-button']:not([hidden]) ~ *:not([hidden]) {
+  padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight, var(--pf-global--spacer--2xl, 3rem));
+}
+
+[part='header'] {
+  display: flex;
+  align-items: baseline;
+}
+
+[part='icon'] {
+  color: var(--_header-icon-color);
+  margin-right: var(--pf-c-popover__title-icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));
+}
+
+[part='icon'] ::slotted(*),
+[part='icon'] * {
+  vertical-align: -0.125em;
+}
+
+[part='icon'],
+[part='heading']::slotted(:is(h2, h3, h4, h5, h6)),
+[part='heading'] :is(h2, h3, h4, h5, h6) {
+  font-size: var(--pf-c-popover__title--FontSize, var(--pf-global--FontSize--md, 1rem));
+  font-weight: var(--pf-global--FontWeight--normal, 400);
+  --pf-icon--size: var(
+    --pf-c-popover__title--FontSize,
+    var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))
+  );
+}
+
+[part='heading']::slotted(:is(h2, h3, h4, h5, h6)),
+[part='heading'] :is(h2, h3, h4, h5, h6) {
+  color: var(--_header-text-color);
+  margin-top: 0;
+  margin-bottom: var(--pf-c-popover__title--MarginBottom, var(--pf-global--spacer--sm, 0.5rem));
+  line-height: var(--pf-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5));
+  font-family: var(
+    --pf-c-popover__title--FontFamily,
+    var(
+      --pf-global--FontFamily--heading--sans-serif,
+      'RedHatDisplay',
+      'Overpass',
+      overpass,
+      helvetica,
+      arial,
+      sans-serif
+    )
+  );
+}
+
+[part='body'] {
+  display: block;
+  word-wrap: break-word;
+}
+
+[part='footer'] {
+  margin-top: var(--pf-c-popover__footer--MarginTop, var(--pf-global--spacer--md, 1rem));
+}
+
+:host([alert-severity='default']) {
+  --_header-text-color: var(--pf-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737));
+  --_header-icon-color: var(--pf-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596));
+}
+
+:host([alert-severity='info']) {
+  --_header-text-color: var(--pf-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952));
+  --_header-icon-color: var(--pf-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3));
+}
+
+:host([alert-severity='warning']) {
+  --_header-icon-color: var(--pf-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00));
+  --_header-text-color: var(--pf-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600));
+}
+
+:host([alert-severity='success']) {
+  --_header-icon-color: var(--pf-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635));
+  --_header-text-color: var(--pf-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18));
+}
+
+:host([alert-severity='danger']) {
+  --_header-icon-color: var(--pf-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b));
+  --_header-text-color: var(--pf-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000));
+}

package/pf-popover/pf-popover.d.ts

@@ -0,0 +1,266 @@
+import { LitElement } from 'lit';
+import { ComposedEvent } from '@patternfly/pfe-core/core.js';
+import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import '@patternfly/elements/pf-button/pf-button.js';
+declare const headingLevels: readonly [2, 3, 4, 5, 6];
+type HeadingLevel = (typeof headingLevels)[number];
+type AlertSeverity = 'default' | 'info' | 'warning' | 'success' | 'danger';
+export declare class PopoverHideEvent extends ComposedEvent {
+    constructor();
+}
+export declare class PopoverHiddenEvent extends ComposedEvent {
+    constructor();
+}
+export declare class PopoverShowEvent extends ComposedEvent {
+    constructor();
+}
+export declare class PopoverShownEvent extends ComposedEvent {
+    constructor();
+}
+/**
+ * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.
+ *
+ * @summary Toggle the visibility of helpful or contextual information.
+ *
+ * @slot -
+ *         The default slot holds invoking element.
+ *         Typically this would be an icon, button, or other small sized element.
+ * @slot heading
+ *       This slot renders the content that will be displayed inside of the header of the popover.
+ *       Typically this would be a heading element.
+ * @slot icon
+ *       This slot renders the icon that will be displayed inside the header of the popover,
+ *       before the heading.
+ * @slot body
+ *       This slot renders the content that will be displayed inside of the body of the popover.
+ * @slot footer
+ *       This slot renders the content that will be displayed inside of the footer of the popover.
+ *
+ * @csspart container - The component wrapper
+ * @csspart content - The content wrapper
+ * @csspart header - The header element; only visible if both an icon annd heading are provided.
+ * @csspart heading - The heading element
+ * @csspart icon - The header icon
+ * @csspart close-button - The close button
+ * @csspart body - The container for the body content
+ * @csspart footer - The container for the footer content
+ *
+ * @cssprop {<length>} --pf-c-popover__arrow--Height
+ *          Height of the arrow
+ *          {@default `1.5625rem`}
+ * @cssprop {<length>} --pf-c-popover__arrow--Width
+ *          Width of the arrow
+ *          {@default `1.5625rem`}
+ * @cssprop {<color>} --pf-c-popover__title-text--Color
+ *          Heading font color
+ *          {@default `inherit`}
+ * @cssprop {<color>} --pf-c-popover__title-icon--Color
+ *          Heading icon font color
+ *          {@default `#151515`}
+ * @cssprop {<color>} --pf-c-popover__arrow--BackgroundColor
+ *          Arrow background color
+ *          {@default `#fff`}
+ * @cssprop --pf-c-popover__arrow--BoxShadow
+ *          Arrow box shadow
+ *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}
+ * @cssprop --pf-c-popover--BoxShadow
+ *          Popover box shadow
+ *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}
+ * @cssprop {<length>} --pf-c-tooltip__content--PaddingTop
+ *          Popover top padding
+ *          {@default `1rem`}
+ * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight
+ *          Popover right padding
+ *          {@default `1rem`}
+ * @cssprop {<length>} --pf-c-tooltip__content--PaddingBottom
+ *          Popover bottom padding
+ *          {@default `1rem`}
+ * @cssprop {<length>} --pf-c-tooltip__content--PaddingLeft
+ *          Popover left padding
+ *          {@default `1rem`}
+ * @cssprop {<number>} --pf-c-popover--line-height
+ *          Popover line height
+ *          {@default `1.5`}
+ * @cssprop {<length>} --pf-c-popover__content--FontSize
+ *          Popover font-size
+ *          {@default `0.875rem`}
+ * @cssprop {<color>} --pf-c-popover__content--BackgroundColor
+ *          Popover background color
+ *          {@default `#fff`}
+ * @cssprop {<length>} --pf-c-popover--MaxWidth
+ *          Popover max-width
+ *          {@default `20.75rem`}
+ * @cssprop {<length>} --pf-c-popover--MinWidth
+ *          Popover min-width
+ *          {@default `20.75rem`}
+ * @cssprop {<number>} --pf-c-popover--c-button--Right
+ *          Close button right position
+ *          {@default `0}
+ * @cssprop {<number>} --pf-c-popover--c-button--Top
+ *          Close button top position
+ *          {@default `0`}
+ * @cssprop {<length>} --pf-c-popover--c-button--sibling--PaddingRight
+ *          Padding between close button and its immediate sibling
+ *          {@default `3rem`}
+ * @cssprop {<length>} --pf-c-popover__title-icon--MarginRight
+ *          Heading icon right margin
+ *          {@default `0.5rem`}
+ * @cssprop {<length>} --pf-c-popover__title--FontSize
+ *          Header font-size
+ *          {@default `1rem`}
+ * @cssprop {<length>} --pf-c-popover__title--MarginBottom
+ *          Header bottom margin
+ *          {@default `0.5rem`}
+ * @cssprop {<number>} --pf-c-popover__title--LineHeight
+ *          Header line height
+ *          {@default `1.5`}
+ * @cssprop {<string>} --pf-c-popover__title--FontFamily
+ *          Header font-family
+ *          {@default `'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif`}
+ * @cssprop {<length>} --pf-c-popover__footer--MarginTop
+ *          Footer top margin
+ *          {@default `1rem`}
+ * @cssprop {<color>} --pf-c-popover--m-default__title-text--Color
+ *          Default alert heading color
+ *          {@default `#003737`}
+ * @cssprop {<color>} --pf-c-popover--m-default__title-icon--Color
+ *          Default alert icon color
+ *          {@default `#009596`}
+ * @cssprop {<color>} --pf-c-popover--m-info__title-text--Color
+ *          Default alert heading color
+ *          {@default `#002952`}
+ * @cssprop {<color>} --pf-c-popover--m-info__title-icon--Color
+ *          Default alert icon color
+ *          {@default `#2b9af3`}
+ * @cssprop {<color>} --pf-c-popover--m-warning__title-text--Color
+ *          Default alert heading color
+ *          {@default `#795600`}
+ * @cssprop {<color>} --pf-c-popover--m-warning__title-icon--Color
+ *          Default alert icon color
+ *          {@default `#f0ab00`}
+ * @cssprop {<color>} --pf-c-popover--m-success__title-text--Color
+ *          Default alert heading color
+ *          {@default `#1e4f18`}
+ * @cssprop {<color>} --pf-c-popover--m-success__title-icon--Color
+ *          Default alert icon color
+ *          {@default `#3e8635`}
+ * @cssprop {<color>} --pf-c-popover--m-danger__title-text--Color
+ *          Default alert heading color
+ *          {@default `#a30000`}
+ * @cssprop {<color>} --pf-c-popover--m-danger__title-icon--Color
+ *          Default alert icon color
+ *          {@default `#c9190b`}
+ */
+export declare class PfPopover extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    private static instances;
+    private static alertIcons;
+    /**
+     * Indicates the initial popover position.
+     * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,
+     * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.
+     * The default is `top`.
+     */
+    position: Placement;
+    /**
+     * The content rendered in the popover's heading.
+     */
+    heading?: string;
+    /**
+     * The content rendered in the popover's body.
+     */
+    body?: string;
+    /**
+     * The content rendered in the popover's footer.
+     */
+    footer?: string;
+    /**
+     * The icon placed before the popover's heading.
+     */
+    icon?: string;
+    /**
+     * The accessible label for the popover. This is required if the no heading is set.
+     */
+    label?: string;
+    /**
+     * The distance to set between the popover and its trigger element.
+     */
+    distance?: number;
+    /**
+     * The flip order when flip is enabled and the initial position is not possible.
+     * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,
+     * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.
+     * The default is [oppositePlacement], where only the opposite placement is tried.
+     */
+    flipBehavior?: Placement[];
+    /**
+     * Disable the flip behavior. The default is `false`.
+     */
+    noFlip: boolean;
+    /**
+     * The heading level to use for the popover's header. The default is `h6`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Indicates which icon set to use for the header's icon.
+     * The default is `fas` (Font Awesome Free Solid).
+     */
+    iconSet?: string;
+    /**
+     * Hide the close button. The default is `false`.
+     */
+    hideClose?: boolean;
+    /**
+     * Indicates the severity variant to use for the alert popover.
+     * There are five options: `default`, `info`, `warning`, `success`, and `danger`.
+     */
+    alertSeverity?: AlertSeverity;
+    /**
+     * The accessible label for the popover's close button. The default is `Close popover`.
+     */
+    closeButtonLabel?: string;
+    /**
+     * The text announced by the screen reader to indicate the popover's severity.
+     * The default is `${alertSeverity} alert:`.
+     */
+    alertSeverityText?: string;
+    /**
+     * Don't hide the popover when clicking ouside of it.
+     */
+    noOutsideClick?: boolean;
+    /**
+     * The ID of the element to attach the popover to.
+     */
+    trigger?: string;
+    private _popover;
+    private _slottedTrigger?;
+    private _arrow;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    disconnectedCallback(): void;
+    private onKeydown;
+    /**
+     * Removes event listeners from the old trigger element and attaches
+     * them to the new trigger element.
+     */
+    triggerChanged(oldValue?: string, newValue?: string): void;
+    /**
+     * Toggle the popover
+     */
+    toggle(): Promise<void>;
+    /**
+     * Opens the popover
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the popover
+     */
+    hide(): Promise<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-popover': PfPopover;
+    }
+}
+export {};