@kodaris/krubble-app-components 1.0.0

package/dist/shell.js

@@ -0,0 +1,860 @@
+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 { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+/**
+ * Global shell component with app bar for app switching.
+ *
+ * The shell provides a horizontal app bar across the top of the viewport containing:
+ * - Logo/home link on the left
+ * - App switcher icons in the middle
+ * - User avatar/menu on the right
+ *
+ * This allows individual apps (using kr-scaffold) to utilize the full width
+ * of the browser window while maintaining consistent global navigation.
+ *
+ * @slot - The main content (typically kr-scaffold with the app)
+ *
+ * @property {string} logo - URL for the logo image
+ * @property {KRApp[]} apps - Available applications for the switcher
+ * @property {string} activeAppId - ID of the currently active app
+ * @property {KRShellUser} user - User profile data
+ * @property {KRShellMenuItem[]} menuItems - Custom menu items for user menu
+ *
+ * @fires app-click - When an app icon is clicked. Detail: { app: KRApp }
+ * @fires menu-item-click - When a menu item is clicked. Detail: { item: KRShellMenuItem }
+ * @fires logout - When logout is clicked
+ */
+let KRShell = class KRShell extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.logo = 'https://s3.amazonaws.com/kodariscom/kodariscom/content/website/kodaris-logo-icon-light-53.png';
+        this.apps = [];
+        this.activeAppId = '';
+        this.user = null;
+        this.menuItems = [];
+        this.isUserMenuOpen = false;
+        this.isAppsMenuOpen = false;
+        this.pendingRequests = 0;
+        this.originalFetch = null;
+        this.originalXhrOpen = null;
+        // Default icons
+        this.defaultLogoutIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>';
+        this.appsGridIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>';
+        this.closeIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.installFetchInterceptor();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.uninstallFetchInterceptor();
+    }
+    /**
+     * Installs global interceptors for fetch and XMLHttpRequest to track pending HTTP requests.
+     * Updates `pendingRequests` state when requests start/complete.
+     */
+    installFetchInterceptor() {
+        if (this.originalFetch)
+            return;
+        const shell = this;
+        // Intercept fetch
+        this.originalFetch = window.fetch.bind(window);
+        const originalFetch = this.originalFetch;
+        window.fetch = function (...args) {
+            shell.pendingRequests++;
+            return originalFetch(...args).finally(() => {
+                shell.pendingRequests--;
+            });
+        };
+        // Intercept XMLHttpRequest
+        this.originalXhrOpen = XMLHttpRequest.prototype.open;
+        const originalXhrOpen = this.originalXhrOpen;
+        XMLHttpRequest.prototype.open = function (method, url, async = true, username, password) {
+            shell.pendingRequests++;
+            this.addEventListener('loadend', () => {
+                shell.pendingRequests--;
+            }, { once: true });
+            return originalXhrOpen.call(this, method, url, async, username, password);
+        };
+    }
+    /**
+     * Restores the original fetch and XMLHttpRequest functions.
+     */
+    uninstallFetchInterceptor() {
+        if (this.originalFetch) {
+            window.fetch = this.originalFetch;
+            this.originalFetch = null;
+        }
+        if (this.originalXhrOpen) {
+            XMLHttpRequest.prototype.open = this.originalXhrOpen;
+            this.originalXhrOpen = null;
+        }
+    }
+    handleLogoClick() {
+        this.dispatchEvent(new CustomEvent('logo-click', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    toggleUserMenu() {
+        this.isUserMenuOpen = !this.isUserMenuOpen;
+        this.isAppsMenuOpen = false;
+    }
+    closeUserMenu() {
+        this.isUserMenuOpen = false;
+    }
+    toggleAppsMenu() {
+        this.isAppsMenuOpen = !this.isAppsMenuOpen;
+        this.isUserMenuOpen = false;
+    }
+    closeAppsMenu() {
+        this.isAppsMenuOpen = false;
+    }
+    handleMenuItemClick(item) {
+        this.closeUserMenu();
+        this.dispatchEvent(new CustomEvent('menu-item-click', {
+            detail: { item },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleLogout() {
+        this.closeUserMenu();
+        this.dispatchEvent(new CustomEvent('logout', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    renderAppsMenu() {
+        return html `
+      <div class="appbar-apps">
+        ${this.isAppsMenuOpen ? html `
+          <div class="menu-backdrop" @click=${this.closeAppsMenu}></div>
+        ` : nothing}
+
+        <button
+          class=${classMap({
+            'appbar-apps-btn': true,
+            'appbar-apps-btn--open': this.isAppsMenuOpen,
+        })}
+          @click=${this.toggleAppsMenu}
+        >
+          <span class="appbar-apps-btn__icon">${unsafeHTML(this.appsGridIcon)}</span>
+        </button>
+
+        <div class=${classMap({
+            'appbar-apps-menu': true,
+            'appbar-apps-menu--open': this.isAppsMenuOpen,
+        })}>
+          <div class="appbar-apps-menu__header">
+            <h2 class="appbar-apps-menu__title">Applications</h2>
+            <button class="appbar-apps-menu__close" @click=${this.closeAppsMenu}>
+              ${unsafeHTML(this.closeIcon)}
+            </button>
+          </div>
+          <div class="appbar-apps-menu__content">
+            <div class="appbar-apps-menu__list">
+              ${this.apps.map((app) => html `
+                <a
+                  class="appbar-apps-menu__item"
+                  href=${app.url}
+                  @click=${(e) => {
+            this.closeAppsMenu();
+            const event = new CustomEvent('app-click', {
+                detail: { app },
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+            });
+            this.dispatchEvent(event);
+            if (event.defaultPrevented) {
+                e.preventDefault();
+            }
+        }}
+                >
+                  ${app.name}
+                </a>
+              `)}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderUserMenu() {
+        if (!this.user)
+            return nothing;
+        const initials = this.user.name
+            .split(' ')
+            .map((part) => part[0])
+            .join('')
+            .toUpperCase()
+            .slice(0, 2);
+        return html `
+      <div class="appbar-user">
+        ${this.isUserMenuOpen ? html `
+          <div class="menu-backdrop" @click=${this.closeUserMenu}></div>
+        ` : nothing}
+
+        <div
+          class="appbar-user__avatar"
+          @click=${this.toggleUserMenu}
+        >
+          ${this.user.avatar
+            ? html `<img src=${this.user.avatar} alt=${this.user.name} />`
+            : initials}
+        </div>
+
+        <div class=${classMap({
+            'appbar-user__menu': true,
+            'appbar-user__menu--open': this.isUserMenuOpen,
+        })}>
+          <div class="appbar-user__header">
+            <p class="appbar-user__name">${this.user.name}</p>
+            ${this.user.email ? html `
+              <p class="appbar-user__email">${this.user.email}</p>
+            ` : nothing}
+          </div>
+
+          ${this.menuItems.map((item) => item.divider
+            ? html `<div class="appbar-user__menu-divider"></div>`
+            : html `
+                <button
+                  class="appbar-user__menu-item"
+                  @click=${() => this.handleMenuItemClick(item)}
+                >
+                  ${item.icon ? html `
+                    <span class="appbar-user__menu-item__icon">${unsafeHTML(item.icon)}</span>
+                  ` : nothing}
+                  ${item.label}
+                </button>
+              `)}
+
+          ${this.menuItems.length > 0 ? html `
+            <div class="appbar-user__menu-divider"></div>
+          ` : nothing}
+
+          <button
+            class="appbar-user__menu-item appbar-user__menu-item--danger"
+            @click=${this.handleLogout}
+          >
+            <span class="appbar-user__menu-item__icon">${unsafeHTML(this.defaultLogoutIcon)}</span>
+            Sign Out
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div class=${classMap({
+            'progress': true,
+            'progress--loading': this.pendingRequests > 0,
+        })}>
+        <div class="progress__track"></div>
+        <div class="progress__bar progress__bar--primary">
+          <span class="progress__bar-inner"></span>
+        </div>
+        <div class="progress__bar progress__bar--secondary">
+          <span class="progress__bar-inner"></span>
+        </div>
+      </div>
+
+      <header class="appbar">
+        <!-- Logo -->
+        ${this.logo ? html `
+          <div class="appbar-logo" @click=${this.handleLogoClick}>
+            <img src=${this.logo} alt="Home" />
+          </div>
+          <div class="appbar-divider"></div>
+        ` : nothing}
+
+        <!-- App Switcher -->
+        ${this.renderAppsMenu()}
+
+        <div class="appbar-spacer"></div>
+
+        <!-- User -->
+        ${this.renderUserMenu()}
+      </header>
+
+      <div class="subbar">
+        <nav class="breadcrumbs">
+          <a href="#">Home</a>
+          <span class="breadcrumbs__separator">/</span>
+          <a href="#">Companies</a>
+          <span class="breadcrumbs__separator">/</span>
+          <span>Acme Corp</span>
+        </nav>
+      </div>
+
+      <main class="main">
+        <slot></slot>
+      </main>
+    `;
+    }
+};
+KRShell.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      width: 100vw;
+      --kr-shell-bar-height: 48px;
+      --kr-shell-bar-bg: #10172a; /* matches scaffold nav-bg */
+      /* --kr-shell-bar-bg: #0a0f1a; */ /* original darker bg */
+      --kr-shell-bar-border: rgba(255, 255, 255, 0.08);
+      --kr-shell-icon-size: 36px;
+      --kr-shell-icon-color: rgba(255, 255, 255, 0.7);
+      --kr-shell-icon-color-hover: rgba(255, 255, 255, 1);
+      --kr-shell-icon-color-active: #beea4e;
+      --kr-shell-icon-bg-hover: rgba(255, 255, 255, 0.08);
+      --kr-shell-icon-bg-active: rgba(190, 234, 78, 0.15);
+      --kr-shell-tooltip-bg: #1a2332;
+      --kr-shell-tooltip-color: #ffffff;
+      --kr-shell-menu-bg: #1a2332;
+      --kr-shell-menu-border: rgba(255, 255, 255, 0.1);
+      --kr-shell-menu-hover: rgba(255, 255, 255, 0.08);
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    /* App Bar */
+    .appbar {
+      height: var(--kr-shell-bar-height);
+      background: var(--kr-shell-bar-bg);
+      border-bottom: 1px solid var(--kr-shell-bar-border);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      flex-shrink: 0;
+      z-index: 100;
+    }
+
+    /* Logo */
+    .appbar-logo {
+      cursor: pointer;
+      margin-right: 8px;
+    }
+
+    .appbar-logo img {
+      display: block;
+      max-width: 24px;
+      max-height: 24px;
+      object-fit: contain;
+    }
+
+    /* Divider */
+    .appbar-divider {
+      width: 1px;
+      height: 24px;
+      background: #ffffff4f;
+      margin: 0 10px;
+    }
+
+    /* Apps Button */
+    .appbar-apps {
+      position: relative;
+    }
+
+    .appbar-apps-btn {
+      width: var(--kr-shell-icon-size);
+      height: var(--kr-shell-icon-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--kr-shell-icon-color);
+      background: transparent;
+      border: none;
+      padding: 0;
+      transition: all 0.15s ease;
+    }
+
+    .appbar-apps-btn:hover {
+      color: var(--kr-shell-icon-color-hover);
+      background: var(--kr-shell-icon-bg-hover);
+    }
+
+    .appbar-apps-btn--open {
+      color: var(--kr-shell-icon-color-hover);
+      background: var(--kr-shell-icon-bg-hover);
+    }
+
+    .appbar-apps-btn__icon {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+    }
+
+    .appbar-apps-btn__icon svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+
+    /* Apps Megamenu */
+    .appbar-apps-menu {
+      position: absolute;
+      left: 0;
+      top: 100%;
+      margin-top: 6px;
+      min-width: 320px;
+      min-height: 90vh;
+      max-height: calc(100vh - var(--kr-shell-bar-height));
+      background: #10172a;
+      border: 1px solid var(--kr-shell-menu-border);
+      border-top: none;
+      border-radius: 0 0 8px 8px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-10px);
+      transition: all 0.15s ease;
+      overflow-y: auto;
+    }
+
+    .appbar-apps-menu--open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    .appbar-apps-menu__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 16px 16px 24px;
+      border-bottom: 1px solid var(--kr-shell-menu-border);
+    }
+
+    .appbar-apps-menu__title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #ffffff;
+      margin: 0;
+    }
+
+    .appbar-apps-menu__close {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      color: rgba(255, 255, 255, 0.6);
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+    }
+
+    .appbar-apps-menu__close:hover {
+      background: var(--kr-shell-menu-hover);
+      color: #ffffff;
+    }
+
+    .appbar-apps-menu__close svg {
+      width: 24px;
+      height: 24px;
+      fill: #ffffff;
+    }
+
+    .appbar-apps-menu__content {
+      padding: 16px 8px;
+    }
+
+    .appbar-apps-menu__list {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      max-width: 320px;
+    }
+
+    .appbar-apps-menu__item {
+      display: block;
+      width: 100%;
+      padding: 12px 16px;
+      background: none;
+      border: none;
+      color: #ffffff;
+      font-size: 14px;
+      font-family: inherit;
+      text-align: left;
+      text-decoration: none;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+    }
+
+    .appbar-apps-menu__item:hover {
+      background: var(--kr-shell-menu-hover);
+    }
+
+    .appbar-apps-menu__item--active,
+    .appbar-apps-menu__item--active:hover {
+      color: var(--kr-shell-icon-color-active);
+    }
+
+    /* Spacer to push user to the right */
+    .appbar-spacer {
+      flex: 1;
+    }
+
+    /* User Section */
+    .appbar-user {
+      position: relative;
+      margin-left: 8px;
+    }
+
+    .appbar-user__avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: #beea4e;
+      color: #0a0f1a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      overflow: hidden;
+      border: 2px solid transparent;
+      transition: border-color 0.15s ease;
+    }
+
+    .appbar-user__avatar:hover {
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+
+    .appbar-user__avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    /* User Menu */
+    .appbar-user__menu {
+      position: absolute;
+      right: 0;
+      top: calc(100% + 8px);
+      min-width: 200px;
+      background: var(--kr-shell-menu-bg);
+      border: 1px solid var(--kr-shell-menu-border);
+      border-radius: 8px;
+      padding: 8px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-8px);
+      transition: all 0.15s ease;
+    }
+
+    .appbar-user__menu--open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    .appbar-user__header {
+      padding: 8px 12px 12px;
+      border-bottom: 1px solid var(--kr-shell-menu-border);
+      margin-bottom: 8px;
+    }
+
+    .appbar-user__name {
+      font-size: 14px;
+      font-weight: 600;
+      color: #ffffff;
+      margin: 0 0 2px;
+    }
+
+    .appbar-user__email {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+      margin: 0;
+    }
+
+    .appbar-user__menu-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 10px 12px;
+      background: none;
+      border: none;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 13px;
+      font-family: inherit;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+    }
+
+    .appbar-user__menu-item:hover {
+      background: var(--kr-shell-menu-hover);
+      color: #ffffff;
+    }
+
+    .appbar-user__menu-item--danger {
+      color: #f87171;
+    }
+
+    .appbar-user__menu-item--danger:hover {
+      background: rgba(248, 113, 113, 0.1);
+      color: #f87171;
+    }
+
+    .appbar-user__menu-item__icon {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .appbar-user__menu-item__icon svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+
+    .appbar-user__menu-divider {
+      height: 1px;
+      background: var(--kr-shell-menu-border);
+      margin: 8px 0;
+    }
+
+    /* Secondary App Bar */
+    .subbar {
+      height: 30px;
+      background: #364365;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      flex-shrink: 0;
+    }
+
+    .breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: #ffffff;
+    }
+
+    .breadcrumbs a {
+      color: #ffffff;
+      text-decoration: none;
+    }
+
+    .breadcrumbs a:hover {
+      text-decoration: underline;
+    }
+
+    .breadcrumbs__separator {
+      color: #ffffff;
+    }
+
+    /* Main Content */
+    .main {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* Click outside overlay */
+    .menu-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 999;
+    }
+
+    /* Progress bar */
+    .progress {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      overflow-x: hidden;
+      z-index: 1000;
+      display: none;
+    }
+
+    .progress--loading {
+      display: block;
+    }
+
+    .progress__track {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      background: rgb(190 234 78 / 50%); // rgba(190, 234, 78, 0.3);
+    }
+
+    .progress__bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      transform-origin: left center;
+    }
+
+    .progress__bar-inner {
+      display: inline-block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: #beea4e;
+    }
+
+    .progress__bar--primary {
+      left: -145.166611%;
+    }
+
+    .progress--loading .progress__bar--primary {
+      animation: progress-primary-translate 2s infinite linear;
+    }
+
+    .progress--loading .progress__bar--primary .progress__bar-inner {
+      animation: progress-primary-scale 2s infinite linear;
+    }
+
+    .progress__bar--secondary {
+      left: -54.888891%;
+    }
+
+    .progress--loading .progress__bar--secondary {
+      animation: progress-secondary-translate 2s infinite linear;
+    }
+
+    .progress--loading .progress__bar--secondary .progress__bar-inner {
+      animation: progress-secondary-scale 2s infinite linear;
+    }
+
+    @keyframes progress-primary-translate {
+      0% {
+        transform: translateX(0);
+      }
+      20% {
+        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+        transform: translateX(0);
+      }
+      59.15% {
+        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+        transform: translateX(83.67142%);
+      }
+      100% {
+        transform: translateX(200.611057%);
+      }
+    }
+
+    @keyframes progress-primary-scale {
+      0% {
+        transform: scaleX(0.08);
+      }
+      36.65% {
+        animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+        transform: scaleX(0.08);
+      }
+      69.15% {
+        animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+        transform: scaleX(0.661479);
+      }
+      100% {
+        transform: scaleX(0.08);
+      }
+    }
+
+    @keyframes progress-secondary-translate {
+      0% {
+        animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+        transform: translateX(0);
+      }
+      25% {
+        animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+        transform: translateX(37.651913%);
+      }
+      48.35% {
+        animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+        transform: translateX(84.386165%);
+      }
+      100% {
+        transform: translateX(160.277782%);
+      }
+    }
+
+    @keyframes progress-secondary-scale {
+      0% {
+        animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
+        transform: scaleX(0.08);
+      }
+      19.15% {
+        animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
+        transform: scaleX(0.457104);
+      }
+      44.15% {
+        animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
+        transform: scaleX(0.72796);
+      }
+      100% {
+        transform: scaleX(0.08);
+      }
+    }
+  `;
+__decorate([
+    property({ type: String })
+], KRShell.prototype, "logo", void 0);
+__decorate([
+    property({ type: Array })
+], KRShell.prototype, "apps", void 0);
+__decorate([
+    property({ type: String, attribute: 'active-app-id' })
+], KRShell.prototype, "activeAppId", void 0);
+__decorate([
+    property({ type: Object })
+], KRShell.prototype, "user", void 0);
+__decorate([
+    property({ type: Array, attribute: 'menu-items' })
+], KRShell.prototype, "menuItems", void 0);
+__decorate([
+    state()
+], KRShell.prototype, "isUserMenuOpen", void 0);
+__decorate([
+    state()
+], KRShell.prototype, "isAppsMenuOpen", void 0);
+__decorate([
+    state()
+], KRShell.prototype, "pendingRequests", void 0);
+KRShell = __decorate([
+    customElement('kr-shell')
+], KRShell);
+export { KRShell };
+//# sourceMappingURL=shell.js.map