@pushengineering/umg-web-components 2.0.5 → 2.0.10

package/dist/components/index.d.ts

@@ -0,0 +1,41 @@
+export { Banner } from './banner/banner';
+export { BannerImage } from './banner-image/';
+export { Box } from './box/';
+export { Button } from './button/';
+export { ButtonIcon } from './button-icon/';
+export { ButtonGroup } from './button-group/';
+export { CaptionCard } from './caption-card/';
+export { DeferredMedia } from './deferred-media/';
+export { Disclosure } from './disclosure/';
+export { EventTable } from './event-table/';
+export { Footer } from './footer/';
+export { Grid } from './grid/';
+export { Header } from './header/';
+export { HeaderDrawer } from './header-drawer/';
+export { HorizontalStack } from './horizontal-stack/';
+export { Icon } from './icon/';
+export { Image } from './image/';
+export { Link } from './link/';
+export { LinkGroup } from './link-group/';
+export { Logo } from './logo/';
+export { MediaGallery } from './media-gallery/';
+export { MediaText } from './media-text/';
+export { Menu } from './menu/';
+export { MenuBar } from './menu-bar/';
+export { Modal } from './modal/';
+export { NumberField } from './number-field/';
+export { Overlay } from './overlay/';
+export { Page } from './page/';
+export { Popover } from './popover/';
+export { Section } from './section/';
+export { Select } from './select/';
+export { Slider } from './slider/';
+export { Socials } from './socials/';
+export { Table } from './table/';
+export { Text } from './text/';
+export { TextField } from './text-field/';
+export { RichText } from './rich-text/';
+export { ThumbnailSlider } from './thumbnail-slider';
+export { Video } from './video/';
+export { VerticalStack } from './vertical-stack/';
+export { Badge } from './badge/';

package/dist/components/link/index.d.ts

@@ -0,0 +1,2 @@
+import { Link } from './link';
+export { Link };

package/dist/components/link/link.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+import type { LinkTarget } from '../../types';
+export declare class Link extends LitElement {
+    url?: string | undefined;
+    target: LinkTarget;
+    underline?: boolean | undefined;
+    linkClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/link-group/index.d.ts

@@ -0,0 +1,2 @@
+import { LinkGroup } from './link-group';
+export { LinkGroup };

package/dist/components/link-group/link-group.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import type { GroupSpacing, GroupAlign } from '../../types';
+export declare class LinkGroup extends LitElement {
+    spacing: GroupSpacing;
+    justify: GroupAlign;
+    mobileJustify: GroupAlign | undefined;
+    noWrap: boolean;
+    stack: boolean;
+    mobileStack: boolean;
+    getClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/logo/index.d.ts

@@ -0,0 +1,2 @@
+import { Logo } from './logo';
+export { Logo };

package/dist/components/logo/logo.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import '../image/';
+export declare class Logo extends LitElement {
+    url: string;
+    height: number;
+    title: string;
+    showTitle: boolean;
+    imgSrc?: string | undefined;
+    imgSrcSet?: string | undefined;
+    imgSizes?: string | undefined;
+    imgWidth: number;
+    imgHeight: number;
+    logoStyles(): {};
+    logoClasses(): any;
+    titleClasses(): any;
+    image(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/media-gallery/index.d.ts

@@ -0,0 +1,2 @@
+import { MediaGallery } from './media-gallery';
+export { MediaGallery };

package/dist/components/media-gallery/media-gallery.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { EventManager } from '../../classes/event-manager/event-manager.js';
+import { SlideEvent } from '../../classes/event-manager/types.js';
+import './media.js';
+export declare class MediaGallery extends LitElement {
+    _mediaItems: Array<HTMLElement>;
+    _slideItems: Array<HTMLElement>;
+    mediaEventManager: EventManager;
+    constructor();
+    protected _customEventsHandler: (e: SlideEvent) => void;
+    private _updateActiveMedia;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/media-gallery/media.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class Media extends LitElement {
+    mediaId: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/media-text/index.d.ts

@@ -0,0 +1,2 @@
+import { MediaText } from './media-text';
+export { MediaText };

package/dist/components/media-text/media-text.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import { BoxHeight, MediaSize } from '../../types';
+import '../box/';
+import '../vertical-stack/';
+export declare class MediaText extends LitElement {
+    setSizeBy: string;
+    mediaHeight: BoxHeight;
+    mediaWidth: MediaSize;
+    mediaOnRight: boolean;
+    blendMedia: boolean;
+    alignContent: string;
+    mobileAlignContent: string;
+    justifyContent: string;
+    mobileJustifyContent: string;
+    spacing: string;
+    padding: string | undefined;
+    mobilePadding: string | undefined;
+    paddingTop: string | undefined;
+    paddingRight: string | undefined;
+    paddingBottom: string | undefined;
+    paddingLeft: string | undefined;
+    colorBg: string | undefined;
+    colorText: string | undefined;
+    opacity: string | undefined;
+    gridClasses(): any;
+    contentStackClasses(): any;
+    mediaTextStyles(): {};
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/media-text/styles/media-size.d.ts

@@ -0,0 +1 @@
+export declare const mediaSize: import("lit").CSSResult;

package/dist/components/menu/index.d.ts

@@ -0,0 +1,2 @@
+import { Menu } from './menu';
+export { Menu };

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, nothing } from 'lit';
+import type { PageWidth } from '../../types';
+import '../disclosure/';
+interface MenuData {
+    linkText: string;
+    linkUrl: string;
+    linkClasses: Array<string>;
+    subItems: Array<MenuData>;
+}
+export declare class Menu extends LitElement {
+    src: string;
+    data?: MenuData[];
+    layout: string;
+    vertical: boolean;
+    hideMenuTitle: boolean;
+    width: PageWidth;
+    divider: boolean;
+    colorText: undefined | string;
+    colorBg: undefined | string;
+    constructor();
+    disconnectedCallback(): void;
+    firstUpdated(): Promise<void>;
+    fetchData(): Promise<void>;
+    private _outsideClick;
+    private _handleMenuEvents;
+    private _closeDisclosures;
+    menuStyles(): {};
+    menuClasses(): any;
+    menuListClasses(): any;
+    menuTitle(title: string): import("lit").TemplateResult<1> | typeof nothing;
+    menuItemClasses(classes: Array<string>): string | undefined;
+    menuList(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}
+export {};

package/dist/components/menu-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { MenuBar } from './menu-bar';
+export { MenuBar };

package/dist/components/menu-bar/menu-bar.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import '../box';
+import '../link-group';
+export declare class MenuBar extends LitElement {
+    sticky: boolean;
+    spacing: string;
+    justify: string;
+    mobileJustify: string;
+    padding?: string | undefined;
+    colorBg: string | undefined;
+    colorText: string | undefined;
+    opacity: string | undefined;
+    menuClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/modal/index.d.ts

@@ -0,0 +1,2 @@
+import { Modal } from './modal';
+export { Modal };

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import '../button-icon';
+export declare class Modal extends LitElement {
+    visible: boolean;
+    layout: string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    modalClasses(): any;
+    toggleModal(): void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/modal/modal.js

@@ -1,18 +1,18 @@
-import { css as m, LitElement as c, html as b } from "lit";
-import { customElement as p } from "lit/decorators/custom-element.js";
-import { property as n } from "lit/decorators/property.js";
-import { classMap as u } from "lit/directives/class-map.js";
+import { css as c, LitElement as m, html as p } from "lit";
+import { customElement as u } from "lit/decorators/custom-element.js";
+import { property as d } from "lit/decorators/property.js";
+import { classMap as b } from "lit/directives/class-map.js";
 import { global as v } from "../../styles/global.js";
 import { settings as g } from "../../scripts/settings.js";
-import { mergeStyles as f } from "../../scripts/mergeStyles.js";
+import { mergeStyles as h } from "../../scripts/mergeStyles.js";
 import "../button-icon/button-icon.js";
-var h = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (e, r, a, l) => {
-  for (var o = l > 1 ? void 0 : l ? _(r, a) : r, i = e.length - 1, s; i >= 0; i--)
-    (s = e[i]) && (o = (l ? s(r, a, o) : s(o)) || o);
-  return l && o && h(r, a, o), o;
+var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (e, l, a, r) => {
+  for (var o = r > 1 ? void 0 : r ? _(l, a) : l, i = e.length - 1, s; i >= 0; i--)
+    (s = e[i]) && (o = (r ? s(l, a, o) : s(o)) || o);
+  return r && o && f(l, a, o), o;
 };
 const { prefix: y } = g;
-let t = class extends c {
+let t = class extends m {
   constructor() {
     super(), this.visible = !1, this.layout = "list", this.addEventListener("keyup", (e) => {
       e.code.toUpperCase() === "ESCAPE" && this.toggleModal();
@@ -40,10 +40,10 @@ let t = class extends c {
     }
   }
   render() {
-    return b`
+    return p`
             <div
                 part="modal"
-                class="modal${u(this.modalClasses())}"
+                class="modal${b(this.modalClasses())}"
                 >
                 <div class="modal__close">
                     <umg-button-icon
@@ -54,8 +54,6 @@ let t = class extends c {
                         label="Close modal"
                         borderRadius="full"
                         borderWidth='0' 
-                        colorText="240,240,240"
-                        colorBg="0,0,0"
                         colorBgOpacity="0"
                         border
                         >
@@ -70,9 +68,9 @@ let t = class extends c {
       `;
   }
 };
-t.styles = f([
+t.styles = h([
   v,
-  m`
+  c`
             /* Base */
             .modal {
                 background-color: rgba(var(--um-color-modal-bg, 255, 255, 255), var(--um-opacity-modal-bg, 0.95));
@@ -107,16 +105,20 @@ t.styles = f([
             }
 
             /* Internal layout */
-            .modal-layout--single {
+            .modal-layout--single .modal__content {
+                justify-content: center;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
                 justify-content: center;
             }
 
             .modal__content {
-                padding: var(--um-space-48, 3rem) 0;
                 width: calc(var(--um-breakpoint-lg, 64rem) - var(--um-space-48, 3rem));
             }
             .modal__content-inner {
                 padding: 0 var(--um-space-24, 1.5rem);
+                min-height: 0;
             }
             .modal__content-inner ::slotted(*) {
                 display: block;
@@ -124,12 +126,11 @@ t.styles = f([
             }
             .modal__close {
                 background-color: rgba(var(--um-color-modal-bg, 255, 255, 255), 1);
-                box-shadow: 0 0 1rem 0.125rem rgb(0,0,0,0.5);
                 display: flex;
                 align-items: center;
-                justify-content: center;
-                padding: var(--um-space-16) 0;
-                position: fixed;
+                justify-content: end;
+                padding: var(--um-space-12) var(--um-space-24);
+                position: sticky;
                 right: 0;
                 top: 0;
                 left: 0;
@@ -141,10 +142,10 @@ t.styles = f([
                 .modal__close {
                     top: initial;
                     bottom: 0;
+                    padding: var(--um-space-16);
                 }
 
                 .modal__content {
-                    padding: var(--um-space-64, 4rem) 0;
                     width: 100%;
                 }
 
@@ -158,14 +159,14 @@ t.styles = f([
             }
         `
 ]);
-d([
-  n({ type: Boolean })
+n([
+  d({ type: Boolean })
 ], t.prototype, "visible", 2);
-d([
-  n()
+n([
+  d()
 ], t.prototype, "layout", 2);
-t = d([
-  p(`${y}-modal`)
+t = n([
+  u(`${y}-modal`)
 ], t);
 export {
   t as Modal

package/dist/components/multiselect/index.d.ts

@@ -0,0 +1,2 @@
+import { Multiselect } from './multiselect';
+export { Multiselect };

package/dist/components/multiselect/multiselect.d.ts

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+import { EventManager } from '../../classes/event-manager/event-manager';
+import '../disclosure';
+import '../text';
+import '../icon';
+import '../button-group';
+interface Option {
+    id: string;
+    name: string;
+    label: string;
+    value: string;
+    count: number;
+    pluralType: string;
+    disabled: boolean;
+}
+interface groupOptions {
+    id: string;
+    name: string;
+    label: string;
+    groups: OptionGroup[];
+}
+interface OptionGroup {
+    groupLabel: string;
+    options: Option[];
+}
+export declare class Multiselect extends LitElement {
+    id: string;
+    options: Option[];
+    groupOptions: groupOptions | undefined;
+    label: string;
+    name: string;
+    selectedItem: number;
+    defaultLabel: boolean;
+    border: boolean;
+    borderRadius: string;
+    multiselect: boolean;
+    disabled: boolean;
+    _checkedInputs: Array<HTMLInputElement>;
+    _currentSelectedLabel: string;
+    windowEventManager: EventManager;
+    eventManager: EventManager;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private _eventsHandler;
+    private _eventsDispatcher;
+    private _getCheckedValues;
+    /** Render UX */
+    private _onRadioChange;
+    private _onMultiSelectChange;
+    optionsListClasses(): any;
+    optionsListStyles(): {};
+    optionsContent(): import("lit").TemplateResult<1> | undefined;
+    selectRadios(): import("lit").TemplateResult<1>;
+    selectCheckboxes(): import("lit").TemplateResult<1>;
+    currentRadioLabel(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}
+export {};

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,2 @@
+import { NumberField } from './number-field';
+export { NumberField };

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import '../button-icon';
+export declare class NumberField extends LitElement {
+    hideLabel: boolean;
+    layout: string;
+    placeholder: string | undefined;
+    disabled: boolean;
+    required: boolean;
+    id: string;
+    error: boolean;
+    name: string;
+    value: string;
+    step: number;
+    min: number;
+    max: number;
+    _input: HTMLInputElement | undefined;
+    changeEvent(): void;
+    setNumericalValue(operator: string): void;
+    fieldClasses(): any;
+    inputClasses(): any;
+    labelClasses(): any;
+    renderLabel(): import("lit").TemplateResult<1>;
+    renderButtons(): import("lit").TemplateResult<1>;
+    renderNumber(): import("lit").TemplateResult<1>;
+    renderErrorMessage(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/overlay/index.d.ts

@@ -0,0 +1,2 @@
+import { Overlay } from './overlay';
+export { Overlay };

package/dist/components/overlay/overlay.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class Overlay extends LitElement {
+    colorText: string;
+    colorBg: string;
+    _visible: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    openOverlay(): void;
+    closeOverlay(): void;
+    overlayClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/page/index.d.ts

@@ -0,0 +1,2 @@
+import { Page } from './page';
+export { Page };

package/dist/components/page/page.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import { PageWidthScale } from '../../types';
+export declare class Page extends LitElement {
+    width: PageWidthScale;
+    sectionMargins: number | undefined;
+    divider: boolean;
+    colorText: string;
+    colorBg: string;
+    pageClasses(): any;
+    pageStyles(): {};
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/popover/index.d.ts

@@ -0,0 +1,2 @@
+import { Popover } from './popover';
+export { Popover };

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import { EventManager } from '../../classes/event-manager/event-manager.js';
+import '../box/';
+import '../vertical-stack/';
+import '../horizontal-stack/';
+import '../button-icon/';
+export declare class Popover extends LitElement {
+    visible: boolean;
+    eventManager: EventManager;
+    private _eventsDispatcher;
+    closePopover(): void;
+    popoverClasses(): any;
+    popoverStyles(): {
+        visibility: string;
+    };
+    closeButton(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/rich-text/index.d.ts

@@ -0,0 +1,2 @@
+import { RichText } from './rich-text';
+export { RichText };

package/dist/components/rich-text/rich-text.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+import type { TextVariant, TextAlignment, TextLineHeight } from '../../types';
+export declare class RichText extends LitElement {
+    size: TextVariant;
+    lineHeight: TextLineHeight | undefined;
+    alignment: TextAlignment;
+    mobileAlignment: TextAlignment | undefined;
+    textClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/section/index.d.ts

@@ -0,0 +1,2 @@
+import { Section } from './section';
+export { Section };

package/dist/components/section/section.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import type { PaddingScale } from '../../types';
+export declare class Section extends LitElement {
+    outerWidth: string;
+    innerWidth: string;
+    maxInnerWidth: number | undefined;
+    compactHeader: boolean;
+    mobileBleed: boolean;
+    mobilePadding: string | undefined;
+    paddingTop: PaddingScale | undefined;
+    paddingBottom: PaddingScale | undefined;
+    paddingLeft: PaddingScale | undefined;
+    paddingRight: PaddingScale | undefined;
+    colorBg: string | undefined;
+    colorText: string | undefined;
+    private _withoutHeader;
+    private _withoutFooter;
+    private _mobilePadding;
+    handleSlotchange(e: Event): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    isNumeric: (string: unknown) => boolean;
+    convertMobilePadding(mobilePadding: string): void;
+    sectionClasses(): any;
+    sectionInnerClasses(): any;
+    sectionStyles(): {};
+    headerStyles(): {};
+    footerStyles(): {};
+    header(): import("lit").TemplateResult<1>;
+    footer(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/select/index.d.ts

@@ -0,0 +1,2 @@
+import { Select } from './select';
+export { Select };

package/dist/components/select/select.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import { EventManager } from '../../classes/event-manager/event-manager';
+import '../disclosure';
+import '../text';
+import '../icon';
+interface Option {
+    id: string;
+    name: string;
+    label: string;
+    value: string;
+    count: number;
+    pluralType: string;
+    disabled: boolean;
+}
+export declare class Select extends LitElement {
+    id: string;
+    options: Option[];
+    label: string;
+    name: string;
+    selectedItem: number;
+    defaultLabel: boolean;
+    colorText: string | undefined;
+    colorBg: string | undefined;
+    border: boolean;
+    borderRadius: string;
+    disabled: boolean;
+    _currentSelectedLabel: string;
+    windowEventManager: EventManager;
+    eventManager: EventManager;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private _eventsHandler;
+    private _eventsDispatcher;
+    /** Render UX */
+    private _onOptionChange;
+    optionsListClasses(): any;
+    optionsListStyles(): {};
+    optionsList(): import("lit").TemplateResult<1> | undefined;
+    currentOptionLabel(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}
+export {};

package/dist/components/slider/index.d.ts

@@ -0,0 +1,2 @@
+import { Slider } from './slider';
+export { Slider };

package/dist/components/slider/slide.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class Slide extends LitElement {
+    contentType: string;
+    active: boolean;
+    content(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}