@kodaris/krubble-app-components 1.0.66 → 1.0.68

package/dist/scaffold.js

@@ -57,6 +57,7 @@ import { KRNavItemEdit } from './scaffold/nav-item-edit.js';
  * @property {KRNavItem[]} nav - Navigation items as JSON array
  * @property {KRUser} user - User profile data
  * @property {boolean} navEnabled - Whether to show the nav drawer (menu toggle remains visible when false)
+ * @property {'employee'|'customer'} user-type - User type. Customers skip all `/api/system` calls since that endpoint is employee-only. Defaults to 'employee'.
  *
  *
  * TODO
@@ -70,18 +71,6 @@ let KRScaffold = class KRScaffold extends LitElement {
          * Default icon for nav items without an icon (shown at top level)
          */
         this.defaultNavItemIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>';
-        this.navItemsExpanded = new Set();
-        this.navQuery = '';
-        this.activeNavItemId = null;
-        this.isNavScrolled = false;
-        this.isNavOpened = localStorage.getItem('kr-scaffold-nav-opened') !== 'false';
-        this.isEditing = false;
-        this.isUserMenuOpen = false;
-        this.pref = { nav: {} };
-        this.draggedNavItemId = null;
-        this.navItemDropTargetId = null;
-        this.navItemDropPosition = 'above';
-        this.pendingRequests = 0;
         this.originalFetch = null;
         this.originalXhrOpen = null;
         this.navItemDragPreview = null;
@@ -109,18 +98,38 @@ let KRScaffold = class KRScaffold extends LitElement {
          * Menu toggle button remains visible and emits menu-click events.
          */
         this.navEnabled = true;
+        /**
+         * User type. Set to 'customer' to skip all /api/system calls — customers don't have access to that endpoint.
+         */
+        this.userType = 'employee';
         /**
          * Breadcrumbs to display in the subbar
          */
         this.breadcrumbs = [];
+        this.navItemsExpanded = new Set();
+        this.navQuery = '';
+        this.activeNavItemId = null;
+        this.isNavScrolled = false;
+        this.isNavOpened = localStorage.getItem('kr-scaffold-nav-opened') !== 'false';
+        this.isEditing = false;
+        this.isUserMenuOpen = false;
+        this.pref = { nav: {} };
+        this.draggedNavItemId = null;
+        this.navItemDropTargetId = null;
+        this.navItemDropPosition = 'above';
+        this.pendingRequests = 0;
         this.boundHandleMouseMove = this.handleMouseMove.bind(this);
         this.boundHandleMouseUp = this.handleMouseUp.bind(this);
     }
     connectedCallback() {
         super.connectedCallback();
-        this.loadPref();
         this.installFetchInterceptor();
     }
+    // Attributes are not reflected into properties until after the first update,
+    // so loadPref() must run here (not connectedCallback) for user-type to be set.
+    firstUpdated() {
+        this.loadPref();
+    }
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('nav') && this.nav.length > 0) {
@@ -142,8 +151,9 @@ let KRScaffold = class KRScaffold extends LitElement {
      * Updates `pendingRequests` state when requests start/complete.
      */
     installFetchInterceptor() {
-        if (this.originalFetch)
+        if (this.originalFetch) {
             return;
+        }
         const scaffold = this;
         // Intercept fetch
         this.originalFetch = window.fetch.bind(window);
@@ -194,17 +204,23 @@ let KRScaffold = class KRScaffold extends LitElement {
      * - resolveUrl(item) = "/operations/settings" (used for href and URL comparison)
      */
     resolveUrl(item) {
-        if (!item.url)
+        if (!item.url) {
             return '#';
+        }
         // External URLs - return as-is
         if (item.external) {
             return item.url;
         }
         // Remove leading slash from url if present, then combine with base
-        const path = item.url.startsWith('/') ? item.url.slice(1) : item.url;
+        let path = item.url;
+        if (item.url.startsWith('/')) {
+            path = item.url.slice(1);
+        }
         const baseHref = document.querySelector('base')?.getAttribute('href') || '/';
-        const base = baseHref.endsWith('/') ? baseHref : (baseHref + '/');
-        return base + path;
+        if (baseHref.endsWith('/')) {
+            return baseHref + path;
+        }
+        return baseHref + '/' + path;
     }
     // =========================================================================
     // Navigation Data
@@ -233,11 +249,15 @@ let KRScaffold = class KRScaffold extends LitElement {
             if (item.type === 'group' && item.children) {
                 item.children.forEach((child, childIndex) => {
                     const childOverride = this.pref.nav[child.id];
+                    let parentId = item.id;
+                    if (childOverride?.parentId !== undefined) {
+                        parentId = childOverride.parentId;
+                    }
                     result.push({
                         ...child,
                         ...childOverride,
                         order: childOverride?.order ?? child.order ?? childIndex,
-                        parentId: childOverride?.parentId !== undefined ? childOverride.parentId : item.id,
+                        parentId,
                     });
                 });
             }
@@ -380,14 +400,18 @@ let KRScaffold = class KRScaffold extends LitElement {
     toggleNavItem(itemId) {
         const navItem = this.shadowRoot?.querySelector(`.nav-item[data-id="${itemId}"]`);
         const groupEl = navItem?.nextElementSibling;
-        if (!groupEl)
+        if (!groupEl) {
             return;
+        }
         if (this.navItemsExpanded.has(itemId)) {
             this.navItemsExpanded.delete(itemId);
             groupEl.animate([
                 { height: `${groupEl.scrollHeight}px` },
                 { height: '0px' }
-            ], { duration: 300, easing: 'ease-in-out' }).onfinish = () => {
+            ], {
+                duration: 300,
+                easing: 'ease-in-out'
+            }).onfinish = () => {
                 groupEl.classList.remove('nav-group--expanded');
             };
         }
@@ -397,7 +421,10 @@ let KRScaffold = class KRScaffold extends LitElement {
             groupEl.animate([
                 { height: '0px' },
                 { height: `${groupEl.scrollHeight}px` }
-            ], { duration: 300, easing: 'ease-in-out' });
+            ], {
+                duration: 300,
+                easing: 'ease-in-out'
+            });
         }
         this.requestUpdate();
     }
@@ -492,12 +519,18 @@ let KRScaffold = class KRScaffold extends LitElement {
         this.pref.nav = {};
     }
     savePref() {
-        const url = this.pref.uuid
-            ? `/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`
-            : `/api/system/preference/json/scaffold?global=true`;
+        if (this.userType === 'customer') {
+            return;
+        }
+        let url = '/api/system/preference/json/scaffold?global=true';
+        let method = 'POST';
+        if (this.pref.uuid) {
+            url = `/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`;
+            method = 'PUT';
+        }
         KRHttp.fetch({
             url,
-            method: this.pref.uuid ? 'PUT' : 'POST',
+            method,
             body: JSON.stringify({ nav: this.pref.nav }),
         })
             .then((response) => response.json())
@@ -510,6 +543,9 @@ let KRScaffold = class KRScaffold extends LitElement {
         });
     }
     loadPref() {
+        if (this.userType === 'customer') {
+            return;
+        }
         KRHttp.fetch({
             url: '/api/system/preference/json/scaffold?global=true',
             method: 'GET',
@@ -526,21 +562,36 @@ let KRScaffold = class KRScaffold extends LitElement {
         });
     }
     handleNavItemContextMenu(e, item) {
-        if (!this.isEditing)
+        if (!this.isEditing) {
             return;
+        }
         e.preventDefault();
         KRContextMenu.open({
             x: e.clientX,
             y: e.clientY,
             items: [
-                { id: 'edit', label: 'Edit Item' },
-                { id: 'divider-1', label: '', divider: true },
-                { id: 'add-above', label: 'Add Item Above' },
-                { id: 'add-below', label: 'Add Item Below' },
+                {
+                    id: 'edit',
+                    label: 'Edit Item'
+                },
+                {
+                    id: 'divider-1',
+                    label: '',
+                    divider: true
+                },
+                {
+                    id: 'add-above',
+                    label: 'Add Item Above'
+                },
+                {
+                    id: 'add-below',
+                    label: 'Add Item Below'
+                },
             ],
         }).then((result) => {
-            if (!result)
+            if (!result) {
                 return;
+            }
             switch (result.id) {
                 case 'edit':
                     this.openNavItemEdit(item);
@@ -566,8 +617,9 @@ let KRScaffold = class KRScaffold extends LitElement {
     openNavItemEdit(item) {
         KRDialog.open(KRNavItemEdit, { data: item }).afterClosed().then((res) => {
             const result = res;
-            if (!result)
+            if (!result) {
                 return;
+            }
             if (!this.pref.nav[item.id]) {
                 this.pref.nav[item.id] = {};
             }
@@ -594,7 +646,13 @@ let KRScaffold = class KRScaffold extends LitElement {
             .filter(i => i.parentId === targetItem.parentId)
             .sort((a, b) => a.order - b.order);
         const targetIndex = siblings.findIndex(i => i.id === targetItem.id);
-        const newOrder = position === 'above' ? targetIndex : targetIndex + 1;
+        let newOrder;
+        if (position === 'above') {
+            newOrder = targetIndex;
+        }
+        else {
+            newOrder = targetIndex + 1;
+        }
         // Shift existing items to make room for the new item
         siblings.forEach((sibling, index) => {
             if (index >= newOrder) {
@@ -631,8 +689,9 @@ let KRScaffold = class KRScaffold extends LitElement {
      * @param item - The nav item being pressed
      */
     handleNavItemMouseDown(e, item) {
-        if (!this.isEditing)
+        if (!this.isEditing) {
             return;
+        }
         e.preventDefault();
         this.draggedNavItemId = item.id;
         this.navItemDragStartY = e.clientY;
@@ -650,8 +709,9 @@ let KRScaffold = class KRScaffold extends LitElement {
      * @param e - The mouse event
      */
     handleMouseMove(e) {
-        if (!this.draggedNavItemId)
+        if (!this.draggedNavItemId) {
             return;
+        }
         // Start dragging after moving a few pixels (to distinguish from clicks)
         if (!this.isNavItemDragging && Math.abs(e.clientY - this.navItemDragStartY) > 5) {
             this.isNavItemDragging = true;
@@ -667,8 +727,9 @@ let KRScaffold = class KRScaffold extends LitElement {
                 this.shadowRoot?.appendChild(this.navItemDragPreview);
             }
         }
-        if (!this.isNavItemDragging)
+        if (!this.isNavItemDragging) {
             return;
+        }
         // Update preview position
         if (this.navItemDragPreview) {
             this.navItemDragPreview.style.left = `${e.clientX + 10}px`;
@@ -719,14 +780,16 @@ let KRScaffold = class KRScaffold extends LitElement {
     updateNavItemDropTarget(e) {
         // Get all nav items in shadow DOM
         const navItems = this.shadowRoot?.querySelectorAll('.nav-item[data-id]');
-        if (!navItems)
+        if (!navItems) {
             return;
+        }
         let foundTarget = false;
         navItems.forEach((el) => {
             const rect = el.getBoundingClientRect();
             const itemId = el.getAttribute('data-id');
-            if (!itemId || itemId === this.draggedNavItemId)
+            if (!itemId || itemId === this.draggedNavItemId) {
                 return;
+            }
             // Skip if mouse is outside this element
             if (e.clientX < rect.left || e.clientX > rect.right ||
                 e.clientY < rect.top || e.clientY > rect.bottom) {
@@ -763,11 +826,22 @@ let KRScaffold = class KRScaffold extends LitElement {
             }
             else {
                 // Regular items only support above/below, not center
-                position = y < rect.height / 2 ? 'above' : 'below';
+                if (y < rect.height / 2) {
+                    position = 'above';
+                }
+                else {
+                    position = 'below';
+                }
                 this.clearNavItemDragExpandTimeout();
             }
             // Determine what the new parent would be
-            const newParentId = position === 'center' ? item.id : item.parentId;
+            let newParentId;
+            if (position === 'center') {
+                newParentId = item.id;
+            }
+            else {
+                newParentId = item.parentId;
+            }
             const draggedItem = this.getComputedNav().find(i => i.id === this.draggedNavItemId);
             // Don't show drop indicator if invalid drop:
             // 1. Can't drop an item into itself (newParentId === draggedNavItemId)
@@ -827,13 +901,15 @@ let KRScaffold = class KRScaffold extends LitElement {
      * with new order values for the dragged item and shifts siblings as needed.
      */
     executeNavItemDrop() {
-        if (!this.draggedNavItemId || !this.navItemDropTargetId)
+        if (!this.draggedNavItemId || !this.navItemDropTargetId) {
             return;
+        }
         const allItems = this.getComputedNav();
         const draggedItem = allItems.find(i => i.id === this.draggedNavItemId);
         const targetItem = allItems.find(i => i.id === this.navItemDropTargetId);
-        if (!draggedItem || !targetItem)
+        if (!draggedItem || !targetItem) {
             return;
+        }
         // Determine the new parentId for the dragged item
         let newParentId;
         if (this.navItemDropPosition === 'center' && targetItem.type === 'group') {
@@ -845,8 +921,9 @@ let KRScaffold = class KRScaffold extends LitElement {
         else {
             newParentId = targetItem.parentId;
         }
-        if (newParentId === this.draggedNavItemId)
+        if (newParentId === this.draggedNavItemId) {
             return;
+        }
         // Get siblings in the destination parent
         const siblings = allItems
             .filter(i => i.parentId === newParentId && i.id !== this.draggedNavItemId)
@@ -917,8 +994,9 @@ let KRScaffold = class KRScaffold extends LitElement {
     // Rendering
     // =========================================================================
     renderNormalFooter() {
-        if (!this.user)
+        if (!this.user) {
             return nothing;
+        }
         const initials = this.user.name
             .split(' ')
             .map((part) => part[0])
@@ -1015,7 +1093,11 @@ let KRScaffold = class KRScaffold extends LitElement {
             stroke="currentColor"
             stroke-width="2"
           >
-            <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+            <path
+              d="M6 9l6 6 6-6"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
         <div class=${classMap({
@@ -1067,7 +1149,11 @@ let KRScaffold = class KRScaffold extends LitElement {
       </div>
       
       ${this.subbar ? html `
-        <kr-subbar menu .breadcrumbs=${this.breadcrumbs} @menu-click=${this.handleMenuClick}>
+        <kr-subbar
+          menu
+          .breadcrumbs=${this.breadcrumbs}
+          @menu-click=${this.handleMenuClick}
+        >
           <slot name="subbar"></slot>
         </kr-subbar>
       ` : nothing}
@@ -1083,7 +1169,11 @@ let KRScaffold = class KRScaffold extends LitElement {
               ${this.label
             ? html `<span class="nav-title">${this.label}</span>`
             : this.logo
-                ? html `<img class="nav-logo" src=${this.logo} alt="Logo" />`
+                ? html `<img
+                    class="nav-logo"
+                    src=${this.logo}
+                    alt="Logo"
+                  />`
                 : nothing}
             </div>
             <div class="nav-content" @scroll=${this.handleNavScroll}>
@@ -1091,7 +1181,11 @@ let KRScaffold = class KRScaffold extends LitElement {
                 <div class="nav-search">
                   <div class="nav-search__wrapper">
                     <span class="nav-search__icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
                         <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                       </svg>
                     </span>
@@ -1104,7 +1198,11 @@ let KRScaffold = class KRScaffold extends LitElement {
                     />
                     ${this.navQuery ? html `
                       <button class="nav-search__clear" @click=${this.handleNavQueryClear}>
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <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>
                       </button>
@@ -1296,7 +1394,7 @@ KRScaffold.styles = css `
     .nav-content {
       flex: 1;
       overflow-y: auto;
-      padding: 0 9px 0.75rem 8px;
+      padding: 0 9px 12px 8px;
     }
 
     .nav-footer {
@@ -1416,7 +1514,7 @@ KRScaffold.styles = css `
 
     .breadcrumbs {
       height: 32px;
-      padding: 0 1rem;
+      padding: 0 16px;
       display: flex;
       align-items: center;
       gap: 6px;
@@ -1510,7 +1608,7 @@ KRScaffold.styles = css `
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      letter-spacing: 0.01em;
+      letter-spacing: 0.14px;
     }
 
     .nav-item__chevron {
@@ -1565,7 +1663,7 @@ KRScaffold.styles = css `
       font-size: 11px;
       font-weight: 600;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.55px;
       color: var(--kr-scaffold-nav-text);
       opacity: 0.6;
     }
@@ -1688,7 +1786,7 @@ KRScaffold.styles = css `
 
     .breadcrumbs {
       height: 32px;
-      padding: 0 1rem;
+      padding: 0 16px;
       display: flex;
       align-items: center;
       gap: 6px;
@@ -1856,6 +1954,61 @@ KRScaffold.styles = css `
       }
     }
   `;
+__decorate([
+    property({ type: String })
+], KRScaffold.prototype, "logo", void 0);
+__decorate([
+    property({ type: String })
+], KRScaffold.prototype, "label", void 0);
+__decorate([
+    property({
+        type: String,
+        attribute: 'home-url'
+    })
+], KRScaffold.prototype, "homeUrl", void 0);
+__decorate([
+    property({
+        type: String,
+        reflect: true
+    })
+], KRScaffold.prototype, "scheme", void 0);
+__decorate([
+    property({ type: Array })
+], KRScaffold.prototype, "nav", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'nav-icons-displayed',
+        reflect: true
+    })
+], KRScaffold.prototype, "navIconsDisplayed", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'nav-expanded'
+    })
+], KRScaffold.prototype, "navExpanded", void 0);
+__decorate([
+    property({ type: Object })
+], KRScaffold.prototype, "user", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRScaffold.prototype, "subbar", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'nav-enabled'
+    })
+], KRScaffold.prototype, "navEnabled", void 0);
+__decorate([
+    property({
+        type: String,
+        attribute: 'user-type'
+    })
+], KRScaffold.prototype, "userType", void 0);
+__decorate([
+    property({ type: Array })
+], KRScaffold.prototype, "breadcrumbs", void 0);
 __decorate([
     state()
 ], KRScaffold.prototype, "navItemsExpanded", void 0);
@@ -1892,39 +2045,6 @@ __decorate([
 __decorate([
     state()
 ], KRScaffold.prototype, "pendingRequests", void 0);
-__decorate([
-    property({ type: String })
-], KRScaffold.prototype, "logo", void 0);
-__decorate([
-    property({ type: String })
-], KRScaffold.prototype, "label", void 0);
-__decorate([
-    property({ type: String, attribute: 'home-url' })
-], KRScaffold.prototype, "homeUrl", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KRScaffold.prototype, "scheme", void 0);
-__decorate([
-    property({ type: Array })
-], KRScaffold.prototype, "nav", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'nav-icons-displayed', reflect: true })
-], KRScaffold.prototype, "navIconsDisplayed", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'nav-expanded' })
-], KRScaffold.prototype, "navExpanded", void 0);
-__decorate([
-    property({ type: Object })
-], KRScaffold.prototype, "user", void 0);
-__decorate([
-    property({ type: Boolean })
-], KRScaffold.prototype, "subbar", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'nav-enabled' })
-], KRScaffold.prototype, "navEnabled", void 0);
-__decorate([
-    property({ type: Array })
-], KRScaffold.prototype, "breadcrumbs", void 0);
 KRScaffold = __decorate([
     customElement('kr-scaffold')
 ], KRScaffold);