@eui/eds-wc 22.0.0-alpha.16 → 22.0.0-alpha.18

package/eds-swiper/eds-wc-swiper.js

@@ -0,0 +1,384 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, nothing } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { EdsBaseElement } from '../shared/eds-base.js';
+/**
+ * `<eds-wc-swiper-item>` — a single item within `<eds-wc-swiper>`.
+ *
+ * Pure content-projection card with scroll-snap alignment and card-like styling. 1:1 projection
+ * of the Angular `eds-swiper-item` component (host `role="listitem"`, `.eds-swiper-item` class).
+ *
+ * @slot - Default slot for the item content.
+ */
+let EdsWcSwiperItem = class EdsWcSwiperItem extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Data attribute value for end-to-end testing identification.
+         * @default 'eds-swiper-item'
+         */
+        this.e2eAttr = 'eds-swiper-item';
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
+        :host {
+            display: block;
+            flex-shrink: 0;
+            scroll-snap-align: start;
+            border-radius: var(--eds-br-l);
+            background-color: var(--eds-c-surface-elevation);
+            padding: var(--eds-sp-m);
+            box-shadow: var(--eds-sh-1);
+            transition: box-shadow 200ms ease;
+        }
+
+        :host(:hover) {
+            box-shadow: var(--eds-sh-2);
+        }
+
+        @media (max-width: 767px) {
+            :host {
+                min-width: 280px;
+                padding: var(--eds-sp-s);
+            }
+        }
+    `; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'listitem');
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'data-e2e', reflect: true })
+], EdsWcSwiperItem.prototype, "e2eAttr", void 0);
+EdsWcSwiperItem = __decorate([
+    customElement('eds-wc-swiper-item')
+], EdsWcSwiperItem);
+export { EdsWcSwiperItem };
+/**
+ * `<eds-wc-swiper>` — EDS Swiper Web Component.
+ *
+ * A horizontal scrolling container that displays items in a row with optional navigation arrows
+ * and smooth scroll-snap behavior. Unlike the carousel (one slide at a time with transform-based
+ * animation), the swiper displays multiple items simultaneously and uses native scroll behavior.
+ * 1:1 projection of the Angular `eds-swiper` component (host `role="region"`, `.eds-swiper` class).
+ *
+ * Items are projected via the default slot — each direct child (typically an
+ * `<eds-wc-swiper-item>`) is one item in the scrollable track.
+ *
+ * @example
+ * ```html
+ * <eds-wc-swiper gap="20" item-min-width="320">
+ *   <eds-wc-swiper-item>Card 1</eds-wc-swiper-item>
+ *   <eds-wc-swiper-item>Card 2</eds-wc-swiper-item>
+ *   <eds-wc-swiper-item>Card 3</eds-wc-swiper-item>
+ * </eds-wc-swiper>
+ * ```
+ *
+ * @slot - Default slot for the swiper items (each direct child = one item).
+ *
+ * @fires swiper-scroll - Dispatched when the track is scrolled via a navigation arrow. `detail: { direction: 'left' | 'right' }`
+ */
+let EdsWcSwiper = class EdsWcSwiper extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Data attribute value for end-to-end testing identification.
+         * @default 'eds-swiper'
+         */
+        this.e2eAttr = 'eds-swiper';
+        /**
+         * Accessible label describing the swiper region.
+         * @default 'Scrollable content'
+         */
+        this.ariaLabel = 'Scrollable content';
+        /**
+         * Gap between items in pixels.
+         * @default 20
+         */
+        this.gap = 20;
+        /**
+         * Minimum width of each item in pixels. Applied to slotted items via a CSS custom property.
+         * @default 320
+         */
+        this.itemMinWidth = 320;
+        /**
+         * Whether to hide navigation arrows.
+         * @default false
+         */
+        this.hideNavigation = false;
+        this._canScrollLeft = false;
+        this._canScrollRight = false;
+        this._slideDirection = null;
+        this._slideAnimationTimer = null;
+        this._scrollLeft = () => this.scrollLeftBy();
+        this._scrollRight = () => this.scrollRightBy();
+        this._onScroll = () => this._updateScrollState();
+        this._onSlotChange = () => this._updateScrollState();
+    }
+    /** Whether navigation arrows should be visible. */
+    get _showNavigation() {
+        return !this.hideNavigation && (this._canScrollLeft || this._canScrollRight);
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
+        :host {
+            display: block;
+            position: relative;
+            width: 100%;
+        }
+
+        .eds-swiper__track {
+            display: flex;
+            overflow-x: auto;
+            scroll-snap-type: x mandatory;
+            scroll-behavior: smooth;
+            -webkit-overflow-scrolling: touch;
+            scrollbar-width: none;
+            padding: var(--eds-sp-2xs) 0;
+        }
+
+        .eds-swiper__track::-webkit-scrollbar {
+            display: none;
+        }
+
+        .eds-swiper__track--slide-right ::slotted(*) {
+            animation: eds-swiper-slide-in-right 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+        }
+
+        .eds-swiper__track--slide-left ::slotted(*) {
+            animation: eds-swiper-slide-in-left 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+        }
+
+        ::slotted(*) {
+            min-width: var(--_eds-swiper-item-min-width, 320px);
+        }
+
+        .eds-swiper__nav {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 2;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            padding: 0;
+            border: none;
+            border-radius: var(--eds-br-full);
+            cursor: pointer;
+            color: var(--eds-c-foreground-subtle);
+            font-family: inherit;
+            background-color: var(--eds-c-surface-elevation);
+            box-shadow: var(--eds-sh-1);
+            transition: opacity 200ms ease, box-shadow 200ms ease;
+        }
+
+        .eds-swiper__nav:hover {
+            box-shadow: var(--eds-sh-2);
+        }
+
+        .eds-swiper__nav:focus-visible {
+            outline: 2px solid var(--eds-c-border-focus);
+            outline-offset: 2px;
+        }
+
+        .eds-swiper__nav svg {
+            width: var(--eds-is-m);
+            height: var(--eds-is-m);
+            fill: currentColor;
+        }
+
+        .eds-swiper__nav--prev {
+            left: var(--eds-sp-2xs);
+        }
+
+        .eds-swiper__nav--next {
+            right: var(--eds-sp-2xs);
+        }
+
+        @media (max-width: 767px) {
+            .eds-swiper__nav {
+                display: none;
+            }
+        }
+
+        @keyframes eds-swiper-slide-in-right {
+            from {
+                opacity: 0.4;
+                transform: translateX(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        @keyframes eds-swiper-slide-in-left {
+            from {
+                opacity: 0.4;
+                transform: translateX(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+    `; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'region');
+        }
+        this._resizeObserver = new ResizeObserver(() => this._updateScrollState());
+        this._resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+        if (this._slideAnimationTimer) {
+            clearTimeout(this._slideAnimationTimer);
+            this._slideAnimationTimer = null;
+        }
+    }
+    firstUpdated() {
+        this._updateScrollState();
+    }
+    render() {
+        const baseUrl = EdsBaseElement.assetsBaseUrl;
+        const prevHref = `${baseUrl}/eds/icons/sprites/core.svg#caret-left`;
+        const nextHref = `${baseUrl}/eds/icons/sprites/core.svg#caret-right`;
+        const trackClasses = [
+            'eds-swiper__track',
+            this._slideDirection === 'left' ? 'eds-swiper__track--slide-left' : '',
+            this._slideDirection === 'right' ? 'eds-swiper__track--slide-right' : '',
+        ].filter(Boolean).join(' ');
+        return html `
+            <div
+                class="${trackClasses}"
+                role="list"
+                style="gap: ${this.gap}px; --_eds-swiper-item-min-width: ${this.itemMinWidth}px;"
+                @scroll="${this._onScroll}">
+                <slot @slotchange="${this._onSlotChange}"></slot>
+            </div>
+
+            ${this._showNavigation && this._canScrollLeft ? html `
+                <button
+                    type="button"
+                    class="eds-swiper__nav eds-swiper__nav--prev"
+                    aria-label="Scroll left"
+                    @click="${this._scrollLeft}">
+                    <svg aria-hidden="true"><use href="${prevHref}"></use></svg>
+                </button>
+            ` : nothing}
+
+            ${this._showNavigation && this._canScrollRight ? html `
+                <button
+                    type="button"
+                    class="eds-swiper__nav eds-swiper__nav--next"
+                    aria-label="Scroll right"
+                    @click="${this._scrollRight}">
+                    <svg aria-hidden="true"><use href="${nextHref}"></use></svg>
+                </button>
+            ` : nothing}
+        `;
+    }
+    /** Scroll the track to the left by ~one viewport width. */
+    scrollLeftBy() {
+        const track = this._track;
+        if (!track)
+            return;
+        this._triggerSlideAnimation('left');
+        track.scrollBy({ left: -track.clientWidth * 0.8, behavior: 'smooth' });
+        this.dispatchEvent(new CustomEvent('swiper-scroll', {
+            bubbles: true,
+            composed: true,
+            detail: { direction: 'left' },
+        }));
+    }
+    /** Scroll the track to the right by ~one viewport width. */
+    scrollRightBy() {
+        const track = this._track;
+        if (!track)
+            return;
+        this._triggerSlideAnimation('right');
+        track.scrollBy({ left: track.clientWidth * 0.8, behavior: 'smooth' });
+        this.dispatchEvent(new CustomEvent('swiper-scroll', {
+            bubbles: true,
+            composed: true,
+            detail: { direction: 'right' },
+        }));
+    }
+    _triggerSlideAnimation(direction) {
+        if (this._slideAnimationTimer) {
+            clearTimeout(this._slideAnimationTimer);
+        }
+        this._slideDirection = direction;
+        this._slideAnimationTimer = setTimeout(() => {
+            this._slideDirection = null;
+            this._slideAnimationTimer = null;
+        }, 400);
+    }
+    _updateScrollState() {
+        const track = this._track;
+        if (!track)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = track;
+        const canLeft = scrollLeft > 1;
+        const canRight = scrollLeft + clientWidth < scrollWidth - 1;
+        if (this._canScrollLeft !== canLeft)
+            this._canScrollLeft = canLeft;
+        if (this._canScrollRight !== canRight)
+            this._canScrollRight = canRight;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'data-e2e', reflect: true })
+], EdsWcSwiper.prototype, "e2eAttr", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label', reflect: true })
+], EdsWcSwiper.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: Number })
+], EdsWcSwiper.prototype, "gap", void 0);
+__decorate([
+    property({ type: Number, attribute: 'item-min-width' })
+], EdsWcSwiper.prototype, "itemMinWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-navigation', reflect: true })
+], EdsWcSwiper.prototype, "hideNavigation", void 0);
+__decorate([
+    state()
+], EdsWcSwiper.prototype, "_canScrollLeft", void 0);
+__decorate([
+    state()
+], EdsWcSwiper.prototype, "_canScrollRight", void 0);
+__decorate([
+    state()
+], EdsWcSwiper.prototype, "_slideDirection", void 0);
+__decorate([
+    query('.eds-swiper__track')
+], EdsWcSwiper.prototype, "_track", void 0);
+EdsWcSwiper = __decorate([
+    customElement('eds-wc-swiper')
+], EdsWcSwiper);
+export { EdsWcSwiper };
+//# sourceMappingURL=eds-wc-swiper.js.map

package/eds-swiper/eds-wc-swiper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-swiper.js","sourceRoot":"","sources":["../../src/eds-swiper/eds-wc-swiper.ts"],"names":[],"mappings":"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"}

package/eds-swiper/index.d.ts

@@ -0,0 +1,2 @@
+export { EdsWcSwiper, EdsWcSwiperItem } from './eds-wc-swiper';
+//# sourceMappingURL=index.d.ts.map

package/eds-swiper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-swiper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/eds-swiper/index.js

@@ -0,0 +1,2 @@
+export { EdsWcSwiper, EdsWcSwiperItem } from './eds-wc-swiper';
+//# sourceMappingURL=index.js.map

package/eds-swiper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-swiper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/eds-table/eds-wc-table.js

@@ -123,7 +123,7 @@ let EdsWcTable = class EdsWcTable extends EdsBaseElement {
 
         thead th {
             background: var(--eds-c-surface-neutral-subtler); color: var(--eds-c-foreground-default);
-            font: var(--eds-f-label-m-semi-bold); padding: var(--eds-sp-s); text-align: left;
+            font: var(--eds-f-label-m-semibold); padding: var(--eds-sp-s); text-align: left;
             border-bottom: var(--eds-bw-s) solid var(--eds-c-border-divider); white-space: nowrap;
         }
         :host([sticky-header]) thead { position: sticky; top: 0; z-index: 8; }

package/eds-tabs/eds-wc-tabs.js

@@ -58,7 +58,7 @@ let EdsWcTabs = class EdsWcTabs extends LitElement {
             background: none;
             cursor: pointer;
             color: var(--eds-c-foreground-subtler);
-            font: var(--eds-f-label-m-semi-bold);
+            font: var(--eds-f-label-m-semibold);
             outline: none;
             white-space: nowrap;
             gap: var(--eds-sp-2xs);

package/eds-textarea/eds-wc-textarea.js

@@ -77,7 +77,7 @@ let EdsWcTextarea = class EdsWcTextarea extends EdsBaseElement {
         }
 
         textarea:disabled {
-            background-color: var(--eds-c-suface-disabled);
+            background-color: var(--eds-c-surface-disabled);
             border-color: var(--eds-c-border-disabled);
             color: var(--eds-c-foreground-subtler);
             pointer-events: none;

package/eds-timeline/eds-wc-timeline.js

@@ -169,9 +169,9 @@ let EdsWcTimelineItem = class EdsWcTimelineItem extends ColorMixin(EdsBaseElemen
             min-width: 0;
         }
 
-        .title { font: var(--eds-f-label-m-semi-bold); color: var(--_title-color); line-height: var(--_first-line-height); }
+        .title { font: var(--eds-f-label-m-semibold); color: var(--_title-color); line-height: var(--_first-line-height); }
         .subtitle { font: var(--eds-f-paragraph-s); color: var(--eds-c-foreground-subtler); margin-top: var(--eds-sp-4xs); }
-        .date { font: var(--eds-f-label-s-semi-bold); color: var(--eds-c-foreground-default); line-height: var(--_first-line-height); }
+        .date { font: var(--eds-f-label-s-semibold); color: var(--eds-c-foreground-default); line-height: var(--_first-line-height); }
         .time { font: var(--eds-f-paragraph-xs); color: var(--eds-c-foreground-subtler); margin-top: var(--eds-sp-4xs); }
         .content .date { margin-top: var(--eds-sp-2xs); }
     `; }

package/eds-timepicker/eds-wc-timepicker.js

@@ -58,7 +58,7 @@ let EdsWcTimepicker = class EdsWcTimepicker extends EdsBaseElement {
         input:focus-visible { outline: 2px solid var(--eds-c-border-primary); outline-offset: -2px; }
         input[readonly] { background: transparent; border-color: transparent; pointer-events: none; }
 
-        .separator { font: var(--eds-f-label-m-semi-bold); color: var(--eds-c-foreground-subtler); }
+        .separator { font: var(--eds-f-label-m-semibold); color: var(--eds-c-foreground-subtler); }
     `; }
     render() {
         const ro = this.readonly;

package/eds-user-profile/eds-wc-user-profile.d.ts

@@ -0,0 +1,146 @@
+import { EdsBaseElement } from '../shared/eds-base.js';
+import '../eds-avatar/eds-wc-avatar.js';
+import '../eds-icon/eds-wc-icon.js';
+/**
+ * `<eds-wc-user-profile>` — EDS User Profile Web Component.
+ *
+ * 1:1 projection of the Angular `eds-user-profile`. Displays a user's avatar, name and
+ * sub-info with an optional dropdown menu, or an icon-only login/logged-in trigger. Supports
+ * keyboard navigation of the menu (ArrowUp/Down, Enter/Space, Escape), click-outside-to-close,
+ * and left/right menu alignment.
+ *
+ * Menu items are projected via the default slot as `<eds-wc-user-profile-menu>` containing
+ * `<eds-wc-user-profile-menu-item>` children. When a menu is present the profile becomes an
+ * interactive `role="button"` trigger.
+ *
+ * The Angular component auto-detects `eds-shell-toolbar` / `eds-shell-header` ancestors to force
+ * toolbar / reverse layout. Web Components have no DI/ancestor injection, so those two contextual
+ * behaviors are exposed as explicit reflected boolean attributes `in-toolbar` and `reverse-context`.
+ *
+ * @example
+ * ```html
+ * <eds-wc-user-profile full-name="John Doe" sub-infos="Administrator">
+ *   <eds-wc-user-profile-menu>
+ *     <eds-wc-user-profile-menu-item>Profile</eds-wc-user-profile-menu-item>
+ *     <eds-wc-user-profile-menu-item>Settings</eds-wc-user-profile-menu-item>
+ *     <eds-wc-user-profile-menu-item>Log out</eds-wc-user-profile-menu-item>
+ *   </eds-wc-user-profile-menu>
+ * </eds-wc-user-profile>
+ *
+ * <!-- Icon-only login trigger -->
+ * <eds-wc-user-profile has-icon-only login-label="Log in"></eds-wc-user-profile>
+ * ```
+ *
+ * @slot - Dropdown menu content (an `<eds-wc-user-profile-menu>` with menu items)
+ *
+ * @fires login-click - Dispatched when the icon-only profile is clicked while not logged in. `detail: void`
+ */
+export declare class EdsWcUserProfile extends EdsBaseElement {
+    /** Full name of the user. */
+    fullName: string;
+    /** First name. */
+    firstName: string;
+    /** Last name. */
+    lastName: string;
+    /** URL of the avatar image. */
+    avatarUrl: string;
+    /** Additional info displayed below the name (e.g. email, role). */
+    subInfos: string;
+    /** Welcome label displayed before the user name. */
+    welcomeLabel: string;
+    /** Whether to show the welcome label. */
+    hasWelcomeLabel: boolean;
+    /** Whether to show user name and info text. */
+    isShowUserInfos: boolean;
+    /** Whether to show initials in the avatar when no image. */
+    isShowAvatarInitials: boolean;
+    /** Reverse the layout (name on left, avatar on right). */
+    isReverse: boolean;
+    /** Whether to reverse name order (firstName first). */
+    reverseNameOrder: boolean;
+    /** Whether to show only an icon with a login/logged-in label (no avatar, no name). */
+    hasIconOnly: boolean;
+    /** Whether the user is currently logged in (used with hasIconOnly). */
+    isLoggedIn: boolean;
+    /** Label shown when not logged in (hasIconOnly mode). */
+    loginLabel: string;
+    /** Label shown when logged in (hasIconOnly mode). */
+    loggedInLabel: string;
+    /**
+     * Force toolbar styling. In Angular this is derived from an `eds-shell-toolbar` ancestor;
+     * WC has no ancestor injection, so it is an explicit reflected attribute.
+     */
+    inToolbar: boolean;
+    /**
+     * Force reverse layout by context. In Angular this is derived from an `eds-shell-header`
+     * ancestor; WC has no ancestor injection, so it is an explicit reflected attribute.
+     */
+    reverseContext: boolean;
+    private _menuOpen;
+    private _alignLeft;
+    private _hasMenu;
+    private _focusedIndex;
+    private _triggerEl;
+    /** Effective reverse state: input or context. */
+    private get _effectiveReverse();
+    /** Icon to display in icon-only mode based on login state. */
+    private get _iconOnlyIcon();
+    /** Label to display in icon-only mode based on login state. */
+    private get _iconOnlyLabel();
+    /** Whether the component has a dropdown menu. */
+    private get _menuAvailable();
+    /** Whether the component is interactive (clickable/tabbable). */
+    private get _isInteractive();
+    /** Computed display name. */
+    private get _displayName();
+    /** Computed initials from name. */
+    private get _initials();
+    private get _menuItems();
+    static styles: import("lit").CSSResult;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private _onSlotChange;
+    private _onProfileClick;
+    private _onTriggerKeydown;
+    private _toggleMenu;
+    private _closeMenu;
+    private _onDocumentClick;
+    private _onMenuKeydown;
+    private _focusFirstItem;
+    private _moveFocus;
+    private _updateAlignment;
+}
+/**
+ * `<eds-wc-user-profile-menu>` — Container for user-profile dropdown menu items.
+ *
+ * Pure content-projection wrapper. Groups `<eds-wc-user-profile-menu-item>` children inside the
+ * profile dropdown panel.
+ *
+ * @slot - Menu items (`<eds-wc-user-profile-menu-item>`)
+ */
+export declare class EdsWcUserProfileMenu extends EdsBaseElement {
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * `<eds-wc-user-profile-menu-item>` — A single item in the user-profile dropdown menu.
+ *
+ * Rendered as `role="menuitem"` with roving `tabindex="-1"`; the parent
+ * `<eds-wc-user-profile>` manages focus via ArrowUp/Down.
+ *
+ * @slot - Item label content
+ */
+export declare class EdsWcUserProfileMenuItem extends EdsBaseElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'eds-wc-user-profile': EdsWcUserProfile;
+        'eds-wc-user-profile-menu': EdsWcUserProfileMenu;
+        'eds-wc-user-profile-menu-item': EdsWcUserProfileMenuItem;
+    }
+}
+//# sourceMappingURL=eds-wc-user-profile.d.ts.map

package/eds-user-profile/eds-wc-user-profile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-user-profile.d.ts","sourceRoot":"","sources":["../../src/eds-user-profile/eds-wc-user-profile.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,gBAAiB,SAAQ,cAAc;IAChD,6BAA6B;IACuB,QAAQ,SAAM;IAElE,kBAAkB;IACmC,SAAS,SAAM;IAEpE,iBAAiB;IACmC,QAAQ,SAAM;IAElE,+BAA+B;IACsB,SAAS,SAAM;IAEpE,mEAAmE;IACf,QAAQ,SAAM;IAElE,oDAAoD;IACI,YAAY,SAAa;IAEjF,yCAAyC;IACoB,eAAe,UAAQ;IAEpF,+CAA+C;IACe,eAAe,UAAQ;IAErF,4DAA4D;IACO,oBAAoB,UAAQ;IAE/F,0DAA0D;IACW,SAAS,UAAS;IAEvF,uDAAuD;IACO,gBAAgB,UAAS;IAEvF,sFAAsF;IACd,WAAW,UAAS;IAE5F,uEAAuE;IACf,UAAU,UAAS;IAE3E,yDAAyD;IACH,UAAU,SAAY;IAE5E,qDAAqD;IACK,aAAa,SAAe;IAEtF;;;OAGG;IACkE,SAAS,UAAS;IAEvF;;;OAGG;IACuE,cAAc,UAAS;IAExF,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAM;IAEZ,OAAO,CAAC,UAAU,CAAe;IAEzD,iDAAiD;IACjD,OAAO,KAAK,iBAAiB,GAE5B;IAED,8DAA8D;IAC9D,OAAO,KAAK,aAAa,GAExB;IAED,+DAA+D;IAC/D,OAAO,KAAK,cAAc,GAEzB;IAED,iDAAiD;IACjD,OAAO,KAAK,cAAc,GAIzB;IAED,iEAAiE;IACjE,OAAO,KAAK,cAAc,GAEzB;IAED,6BAA6B;IAC7B,OAAO,KAAK,YAAY,GAQvB;IAED,mCAAmC;IACnC,OAAO,KAAK,SAAS,GAepB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAgB,MAAM,0BAuGpB;IAEO,oBAAoB,IAAI,IAAI;IAK5B,iBAAiB,IAAI,IAAI;cAKf,MAAM;IA4DzB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,gBAAgB,CAItB;IAEF,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,gBAAgB;CAK3B;AAED;;;;;;;GAOG;AACH,qBACa,oBAAqB,SAAQ,cAAc;IACpD,OAAgB,MAAM,0BAKpB;cAEiB,MAAM;CAG5B;AAED;;;;;;;GAOG;AACH,qBACa,wBAAyB,SAAQ,cAAc;IACxD,OAAgB,MAAM,0BA6BpB;IAEO,iBAAiB,IAAI,IAAI;cAMf,MAAM;CAG5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,gBAAgB,CAAC;QACxC,0BAA0B,EAAE,oBAAoB,CAAC;QACjD,+BAA+B,EAAE,wBAAwB,CAAC;KAC7D;CACJ"}