@kubex/zinc 1.0.4 → 1.0.6

package/src/components/menu-item/menu-item.component.ts

@@ -50,6 +50,8 @@ export default class ZnMenuItem extends ZincElement {
   /** Draws the item in a checked state. */
   @property({type: Boolean, reflect: true}) checked = false;
 
+  @property({attribute: 'checked-position', reflect: true}) checkedPosition: 'left' | 'right' = 'left';
+
   /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
   @property() value = '';
 
@@ -59,6 +61,8 @@ export default class ZnMenuItem extends ZincElement {
   /** Draws the menu item in a disabled state, preventing selection. */
   @property({type: Boolean, reflect: true}) disabled = false;
 
+  @property() color: string;
+
   // Link Specific
   @property() href: string;
 
@@ -193,13 +197,22 @@ export default class ZnMenuItem extends ZincElement {
           'menu-item--disabled': this.disabled,
           'menu-item--loading': this.loading,
           'menu-item--has-submenu': this.isSubmenu(),
-          'menu-item--submenu-expanded': isSubmenuExpanded
+          'menu-item--submenu-expanded': isSubmenuExpanded,
+          'menu-item--primary': this.color === 'primary',
+          'menu-item--secondary': this.color === 'secondary',
+          'menu-item--error': this.color === 'error',
+          'menu-item--info': this.color === 'info',
+          'menu-item--success': this.color === 'success',
+          'menu-item--warning': this.color === 'warning',
+          'menu-item--transparent': this.color === 'transparent',
+
         })}
         ?aria-haspopup="${this.isSubmenu()}"
         ?aria-expanded="${isSubmenuExpanded}">
-        <span part="checked-icon" class="menu-item__check">
-          <zn-icon src="check_small" aria-hidden="true"></zn-icon>
-        </span>
+        ${this.checkedPosition === 'left' ? html`
+          <span part="checked-icon" class="menu-item__check">
+            <zn-icon src="check_small" aria-hidden="true"></zn-icon>
+          </span>` : ''}
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
 
@@ -207,6 +220,11 @@ export default class ZnMenuItem extends ZincElement {
 
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
+        ${this.checkedPosition === 'right' ? html`
+          <span part="checked-icon" class="menu-item__check">
+            <zn-icon src="check_small" aria-hidden="true"></zn-icon>
+          </span>` : ''}
+
         <span part="submenu-icon" class="menu-item__chevron">
           <zn-icon src=${isRtl ? 'chevron_left' : 'chevron_right'} aria-hidden="true"></zn-icon>
         </span>

package/src/components/menu-item/menu-item.scss

@@ -2,6 +2,9 @@
 
 :host {
   --submenu-offset: -2px;
+  --color: rgba(var(--zn-text), var(--zn-text-opacity));
+  --hover-color: rgb(var(--zn-primary));
+  --hover-bg: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity));
   display: block;
 }
 
@@ -13,7 +16,7 @@
   position: relative;
   display: flex;
   align-items: stretch;
-  padding: var(--zn-spacing-medium);
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
   transition: .4s fill;
   user-select: none;
   -webkit-user-select: none;
@@ -22,7 +25,7 @@
   border-bottom-width: 1px;
 
   text-decoration: none;
-  color: rgb(var(--zn-text));
+  color: var(--color);
 }
 
 .menu-item__label::slotted(*) {
@@ -47,6 +50,11 @@
   text-overflow: ellipsis;
   align-items: center;
   overflow: hidden;
+  color: var(--color);
+}
+
+.menu-item:hover .menu-item__label {
+  color: var(--hover-color);
 }
 
 .menu-item .menu-item__prefix {
@@ -92,14 +100,14 @@
 
 :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
 .menu-item--submenu-expanded {
-  background-color: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity));
-  color: rgb(var(--zn-primary));
+  background-color: var(--hover-bg);
+  color: var(--hover-color);
 }
 
 :host(:focus-visible) .menu-item {
   outline: none;
-  background-color: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity));
-  color: rgb(var(--zn-primary));
+  background-color: var(--hover-bg);
+  color: var(--hover-color);
   opacity: 1;
 }
 
@@ -134,7 +142,7 @@
 
 /* Add elevation and z-index to submenus */
 zn-popup::part(popup) {
-  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--zn-shadow-large);
   z-index: 100;
   margin-left: var(--submenu-offset);
 }
@@ -155,3 +163,42 @@ zn-popup::part(popup) {
   max-width: var(--auto-size-available-width) !important;
   max-height: var(--auto-size-available-height) !important;
 }
+
+
+.menu-item--primary {
+  --color: rgba(var(--zn-primary), 0.9);
+  --hover-color: #ffffff;
+  --hover-bg: rgba(var(--zn-primary), 0.9);
+}
+
+.menu-item--error {
+  --color: rgb(var(--zn-color-error));
+  --hover-color: #ffffff;
+  --hover-bg: rgba(var(--zn-color-error), 0.9);
+}
+
+.menu-item--info {
+  --color: rgb(var(--zn-color-info));
+  --hover-color: #ffffff;
+  --hover-bg: rgba(var(--zn-color-info), 0.9);
+}
+
+.menu-item--warning {
+  --color: rgb(var(--zn-color-warning));
+  --hover-color: #ffffff;
+  --hover-bg: rgba(var(--zn-color-warning), 0.9);
+}
+
+.menu-item--success {
+  --color: rgb(var(--zn-color-success));
+  --hover-color: #ffffff;
+  --hover-bg: rgba(var(--zn-color-success), 0.9);
+}
+
+.menu-item--secondary {
+  --color: rgb(var(--zn-accent));
+}
+
+.menu-item--transparent {
+  --color: rgb(var(--zn-text));
+}

package/src/components/navbar/navbar.component.ts

@@ -33,10 +33,13 @@ export default class ZnNavbar extends ZincElement {
   @property({attribute: 'navigation', type: Array}) navigation = [];
   @property({attribute: 'full-width', type: Boolean, reflect: true}) fullWidth: boolean;
   @property({attribute: 'icon-bar', type: Boolean, reflect: true}) iconBar: boolean;
+  @property({attribute: 'slim', type: Boolean, reflect: true}) slim: boolean;
+  @property({attribute: 'border', type: Boolean, reflect: true}) border: boolean;
   @property({attribute: 'hide-one', type: Boolean, reflect: true}) hideOne: boolean;
   @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
   @property({type: Boolean}) stacked: boolean;
   @property({type: Array}) dropdown = [];
+  @property({attribute: "no-pad", type: Boolean}) noPad: false
 
   private _preItems: NodeListOf<Element>;
   private _postItems: NodeListOf<Element>;
@@ -197,7 +200,10 @@ export default class ZnNavbar extends ZincElement {
       <div class="navbar__container">
         <ul class="${classMap({
           'navbar': true,
-          'navbar--flush': this.flush
+          'navbar--slim': this.slim,
+          'navbar--border': this.border,
+          'navbar--flush': this.flush,
+          'navbar--no-pad': this.noPad
         })}">
           ${this._preItems}
           ${this.navigation.map((item: any) => {

package/src/components/navbar/navbar.scss

@@ -38,10 +38,14 @@ ul.navbar {
   width: unset;
   height: 100%;
   margin: 0 0;
-  border-left: 1px solid rgb(var(--zn-border-color));
 
   .navbar__container {
     border-bottom: none;
+    height: 100%;
+  }
+
+  ul.navbar.navbar--no-pad li {
+    padding: 0 !important;
   }
 
   ul.navbar {
@@ -66,18 +70,33 @@ ul.navbar {
         right: 0;
       }
     }
+
+    &--slim {
+      li {
+        padding: var(--zn-spacing-small);
+      }
+    }
+
   }
 }
 
 :host([stacked][slot="left"]) {
   ul.navbar {
-    padding-right: var(--zn-spacing-medium);
+    &--border {
+      border-right: 1px solid rgb(var(--zn-border-color));
+    }
+
+    //margin-right: var(--zn-spacing-medium);
   }
 }
 
 :host([stacked][slot="right"]) {
   ul.navbar {
-    padding-left: var(--zn-spacing-medium);
+    &--border {
+      border-left: 1px solid rgb(var(--zn-border-color));
+    }
+
+    //  margin-left: var(--zn-spacing-medium);
   }
 }
 
@@ -162,7 +181,6 @@ ul.navbar {
     }
 
     li {
-
       &.hidden {
         visibility: hidden;
         position: absolute;
@@ -183,10 +201,9 @@ ul.navbar {
       justify-content: center;
       gap: 3px;
 
-
       cursor: pointer;
 
-      zn-icon {
+      zn-icon, zn-tooltip {
         pointer-events: none;
       }
 
@@ -282,6 +299,7 @@ button[popovertarget] {
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: rgb(var(--zn-border-color));
+    height: 35px;
   }
 
   &:host([dropdown]) li {
@@ -332,12 +350,6 @@ button[popovertarget] {
       border-right: 1px solid rgb(var(--zn-border-color));
       border-left: 0;
 
-      @include wc.container-query(hd) {
-        &:first-of-type {
-          border-left: 1px solid rgb(var(--zn-border-color));
-        }
-      }
-
       &.active {
         border-bottom: 0;
       }
@@ -356,13 +368,11 @@ button[popovertarget] {
 .expandables {
   flex-grow: 0;
   flex-shrink: 1;
-  //flex-basis: 100%;
   margin: 0 var(--zn-spacing-medium);
   display: flex;
-  justify-content: end;
-  align-items: end;
+  align-items: center;
   width: fit-content;
-  height: var(--zn-spacing-2x-large);
+  height: 100%;
   gap: var(--zn-spacing-2x-small);
 }
 

package/src/components/option/option.component.ts

@@ -34,6 +34,8 @@ export default class ZnOption extends ZincElement {
   // @ts-expect-error - Controller is currently unused
   private readonly localize = new LocalizeController(this);
 
+  public multiple = false;
+
   @query('.option__label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
@@ -133,7 +135,8 @@ export default class ZnOption extends ZincElement {
           'option--current': this.current,
           'option--disabled': this.disabled,
           'option--selected': this.selected,
-          'option--hover': this.hasHover
+          'option--hover': this.hasHover,
+          'option--singular': !this.multiple
         })}
         @mouseenter=${this.handleMouseEnter}
         @mouseleave=${this.handleMouseLeave}>

package/src/components/option/option.scss

@@ -25,6 +25,15 @@
   cursor: pointer;
 }
 
+.option--singular:not(.option--selected) {
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-2x-large) var(--zn-spacing-x-small) var(--zn-spacing-large);
+
+  zn-icon {
+    display: none;
+  }
+}
+
+
 .option--hover:not(.option--current):not(.option--disabled) {
   background-color: var(--zn-color-primary-100);
   color: var(--zn-input-color);

package/src/components/page-nav/page-nav.component.ts

@@ -14,7 +14,7 @@ interface PageNavigation {
 }
 
 interface PageNavigationItem {
-  icon: string;
+  icon?: string;
   label: string;
   uri: string;
 }
@@ -86,7 +86,7 @@ export default class ZnPageNav extends ZnTabs {
           ${data.title ? html`<h4>${data.title}</h4>` : ''}
           ${data.items.map(item => html`
             <div tab-uri="${item.uri}" class="navigation-item">
-              <zn-icon src="${item.icon}" size="24"></zn-icon>
+              ${item.icon ? html`<zn-icon src="${item.icon}" size="24"></zn-icon>` : ''}
               ${item.label}
             </div>
           `)}

package/src/components/page-nav/page-nav.scss

@@ -46,7 +46,7 @@
   width: var(--page-nav-width);
   background-color: rgb(var(--zn-body));
   overflow-y: auto;
-  padding: var(--zn-spacing-small);
+  padding: var(--zn-spacing-medium);
   @include wc.scrollbars;
 }
 
@@ -58,7 +58,7 @@
 
 .navigation-group h4 {
   margin: 0;
-  padding: var(--zn-spacing-small) 0;
+  padding: var(--zn-spacing-medium) 0;
   color: rgb(var(--zn-text-heading));
   font-size: var(--zn-font-size-medium);
   font-weight: var(--zn-font-weight-semibold);
@@ -81,7 +81,7 @@
   margin-top: 10px;
 }
 
-@include wc.container-query(null, lg) {
+@include wc.container-query(null, md) {
   .breadcrumb {
     display: flex;
     flex-direction: row;
@@ -95,7 +95,7 @@
 
   .breadcrumb-menu-toggle {
     cursor: pointer;
-    margin-left: var(--zn-spacing-small);
+    margin-left: var(--zn-spacing-medium);
 
     display: flex;
     align-items: center;

package/src/components/panel/panel.component.ts

@@ -27,20 +27,15 @@ export default class ZnPanel extends ZincElement {
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'actions', 'footer');
 
   @property({attribute: 'basis-px', type: Number}) basis: number;
-
   @property() caption: string;
-
   @property() description: string;
-
   @property({type: Boolean}) tabbed: boolean;
-
+  @property({type: Boolean}) cosmic: boolean;
   @property({type: Boolean}) flush: boolean;
   @property({attribute: 'flush-x', type: Boolean}) flushX: boolean;
   @property({attribute: 'flush-y', type: Boolean}) flushY: boolean;
-
   @property({type: Boolean}) transparent: boolean;
 
-
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     if (this.basis) {
@@ -59,13 +54,29 @@ export default class ZnPanel extends ZincElement {
     }
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    if (window.CSS.registerProperty) {
+      try {
+        window.CSS.registerProperty({
+          inherits: false,
+          initialValue: '0deg',
+          name: '--rotate',
+          syntax: '<angle>',
+        });
+      } catch (e) {
+        // do nothing
+      }
+    }
+  }
+
   protected render(): unknown {
     const hasActionSlot = this.hasSlotController.test('actions');
     const hasFooterSlot = this.hasSlotController.test('footer');
     const hasHeader = this.caption || hasActionSlot;
 
     return html`
-      <div part="base" class=${classMap({
+      <div part="base" class="${classMap({
         panel: true,
         'panel--flush': this.flush || this.tabbed,
         'panel--flush-x': this.flushX,
@@ -75,7 +86,8 @@ export default class ZnPanel extends ZincElement {
         'panel--has-actions': hasActionSlot,
         'panel--has-footer': hasFooterSlot,
         'panel--has-header': hasHeader,
-      })}>
+        'panel--cosmic': this.cosmic
+      })}">
 
         <div class="panel__inner">
           ${hasHeader ? html`
@@ -94,7 +106,6 @@ export default class ZnPanel extends ZincElement {
           ${hasFooterSlot ? html`
             <slot name="footer" class="panel__footer"></slot>` : null}
         </div>
-
       </div>`;
   }
 }

package/src/components/panel/panel.scss

@@ -12,6 +12,7 @@
   flex-basis: var(--zn-panel-basis);
 }
 
+
 .panel {
   position: relative;
   border: 1px solid rgb(var(--zn-border-color));
@@ -125,5 +126,8 @@
       padding-right: 0;
     }
   }
-}
 
+  &--cosmic {
+    @include wc.cosmic-border();
+  }
+}

package/src/components/popup/popup.component.ts

@@ -1,10 +1,22 @@
-import {arrow, autoUpdate, computePosition, flip, offset, platform, shift, size} from '@floating-ui/dom';
+import {
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  platform,
+  shift,
+  size
+} from '@floating-ui/dom';
 import {classMap} from 'lit/directives/class-map.js';
 import {html, unsafeCSS} from 'lit';
 import {offsetParent} from 'composed-offset-position';
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import type {CSSResultGroup} from 'lit';
+import type {
+  MiddlewareData
+} from '@floating-ui/dom';
 
 import styles from './popup.scss';
 
@@ -385,7 +397,7 @@ export default class ZnPopup extends ZincElement {
         getOffsetParent
       }
     }).then(({x, y, middlewareData, placement}:
-             { x: number, y: number, middlewareData: any, placement: string }) => {
+             { x: number; y: number; middlewareData: MiddlewareData; placement: string }) => {
       const staticSide = {top: 'bottom', right: 'left', bottom: 'top', left: 'right'}[placement.split('-')[0]]!;
 
       this.setAttribute('data-current-placement', placement);
@@ -395,6 +407,8 @@ export default class ZnPopup extends ZincElement {
         top: `${y}px`
       });
 
+      if (!this.popup?.isConnected) return;
+
       this.popup.showPopover();
 
       if (this.arrow) {

package/src/components/progress-tile/progress-tile.component.ts

@@ -30,7 +30,6 @@ export default class ZnProgressTile extends ZincElement {
   @property({type: Number, attribute: 'wait-time', reflect: true}) waitTime: number;
   @property({type: Number, attribute: 'max-time'}) maxTime: number;
   @property({type: Number, attribute: 'end-time'}) endTime: number;
-
   @property({type: Number, attribute: 'max-wait-time'}) maxWaitTime: number = 60 * 5;
   @property({type: Boolean, attribute: 'waiting-agent-response'}) waitingAgentResponse: boolean;
 
@@ -38,7 +37,7 @@ export default class ZnProgressTile extends ZincElement {
   @property() avatar: string;
   @property() caption: string;
 
-  private _timerInterval: any;
+  private _timerInterval: number;
 
   connectedCallback() {
     super.connectedCallback();
@@ -49,7 +48,9 @@ export default class ZnProgressTile extends ZincElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    clearInterval(this._timerInterval);
+    if (this._timerInterval) {
+      clearInterval(this._timerInterval);
+    }
   }
 
   private getHumanReadableTime(time: number): string {
@@ -58,6 +59,11 @@ export default class ZnProgressTile extends ZincElement {
     const minutes = Math.floor((time % 3600) / 60);
     const seconds = time % 60;
 
+    // if over 24 hours, cap it
+    if (hours >= 24) {
+      return '1 Day+';
+    }
+
     if (hours) {
       return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
     }
@@ -96,7 +102,7 @@ export default class ZnProgressTile extends ZincElement {
         'progress-tile--warn': this.waitTime > 60 && this.waitTime < (this.maxWaitTime / 2),
         'progress-tile--danger': this.waitTime >= this.maxWaitTime
       })}">
-        <zn-icon size="45" src="${this.avatar}"></zn-icon>
+        <zn-icon size="36" src="${this.avatar}"></zn-icon>
         <div class="progress-tile__content">
 
           <div class="progress-tile__header">

package/src/components/progress-tile/progress-tile.scss

@@ -9,15 +9,12 @@
   width: 100%;
   align-items: center;
   flex-direction: row;
-  gap: 8px;
+  gap: 12px;
   margin-bottom: 20px;
 
   zn-icon {
     display: flex;
     flex-shrink: 0;
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
     overflow: hidden;
   }
 
@@ -42,6 +39,7 @@
       p {
         font-size: 14px;
         font-weight: 400;
+        margin: 0;
         color: rgb(var(--zn-text));
       }
     }
@@ -53,11 +51,16 @@
       font-size: 12px;
       font-weight: 400;
       color: rgb(var(--zn-primary));
+
+      p {
+        margin: 0;
+      }
     }
   }
 
   &__progress-bars {
     flex-grow: 1;
+    background: rgba(0, 0, 0, 0.02);
 
     &__first, &__second {
       height: 4px;

package/src/components/query-builder/query-builder.component.ts

@@ -181,7 +181,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
                    size="medium"
                    placeholder="Select Filter"
                    @zn-change="${this._addRule}">
-          ${this.filters.map(item => html`
+          ${this.filters && this.filters.map(item => html`
             <zn-option value="${item.id}">
               ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
             </zn-option>`)}

package/src/components/radio/radio.scss

@@ -56,7 +56,7 @@
   justify-content: center;
   width: var(--toggle-size);
   height: var(--toggle-size);
-  box-shadow: var(--zn-shadow-medium);
+  box-shadow: var(--zn-shadow-x-small);
   border: solid var(--zn-input-border-width) var(--zn-input-border-color);
   border-radius: 50%;
   background-color: var(--zn-input-background-color);