@kubex/zinc 1.0.4 → 1.0.5

package/src/components/hover-container/hover-container.scss

@@ -13,47 +13,50 @@
   display: contents;
 }
 
-.hover-container--top::part(popup) {
-  transform-origin: bottom;
-}
+.hover-container {
+  position: relative;
 
-.hover-container--bottom::part(popup) {
-  transform-origin: top;
-}
+  &--top::part(popup) {
+    transform-origin: bottom;
+  }
 
-.hover-container--left::part(popup) {
-  transform-origin: right;
-}
+  &--bottom::part(popup) {
+    transform-origin: top;
+  }
 
-.hover-container--right::part(popup) {
-  transform-origin: left;
-}
+  &--left::part(popup) {
+    transform-origin: right;
+  }
 
-slot[slot='anchor'] {
-  cursor: pointer;
-}
+  &--right::part(popup) {
+    transform-origin: left;
+  }
 
-.hover-container__body {
-  flex-direction: column;
-  z-index: 2;
-  background-color: var(--zn-panel-background-color);
-  border-radius: var(--zn-border-radius-large);
-  border: 1px solid rgb(var(--zn-border-color));
-  box-shadow: var(--zn-shadow-x-large);
-  width: var(--width);
-  max-width: calc(100% - var(--zn-spacing-2x-large));
-  max-height: calc(100% - var(--zn-spacing-2x-large));
-
-  ::slotted(*) {
-    flex: 1 1 auto;
-    display: block;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    color: var(--zn-color-text-default);
-    font-size: var(--zn-font-size-medium);
-    font-weight: var(--zn-font-weight-normal);
-    letter-spacing: var(--zn-tracking-normal);
-    line-height: var(--zn-line-height-dense);
+  &__body {
+    flex-direction: column;
+    z-index: 2;
+    background-color: var(--zn-panel-background-color);
+    border-radius: var(--zn-border-radius-large);
+    border: 1px solid rgb(var(--zn-border-color));
+    box-shadow: var(--zn-shadow-x-large);
+    width: var(--width);
+    max-width: calc(100% - var(--zn-spacing-2x-large));
+    max-height: calc(100% - var(--zn-spacing-2x-large));
+
+    ::slotted(*) {
+      flex: 1 1 auto;
+      display: block;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      color: var(--zn-color-text-default);
+      font-size: var(--zn-font-size-medium);
+      font-weight: var(--zn-font-weight-normal);
+      letter-spacing: var(--zn-tracking-normal);
+      line-height: var(--zn-line-height-dense);
+    }
   }
 }
 
+slot[slot='anchor'] {
+  cursor: pointer;
+}

package/src/components/icon/icon.component.ts

@@ -8,7 +8,7 @@ import ZincElement from '../../internal/zinc-element';
 
 import styles from './icon.scss';
 
-type IconLibrary = "material" | "material-outlined" | "material-round" | "material-sharp" |
+type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" |
   "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line";
 
 export type IconColor =
@@ -63,6 +63,10 @@ export default class ZnIcon extends ZincElement {
 
   @property({reflect: true}) color: IconColor;
 
+  @property({type: Boolean}) padded: boolean = false;
+
+  @property({type: Boolean}) squared: boolean = false;
+
   gravatarOptions = "";
   defaultLibrary: IconLibrary = "material-symbols-outlined";
 
@@ -142,7 +146,7 @@ export default class ZnIcon extends ZincElement {
     // load the material icons font if the library is set to material
     render(html`
       <link
-        href="https://cdn.jsdelivr.net/gh/kubex/icons@0.0.6/dist/kubex-icons.css"
+        href="https://cdn.jsdelivr.net/gh/kubex/icons@0.0.8/dist/kubex-icons.css"
         rel="stylesheet">
       <link
         href="https://cdn.lineicons.com/5.0/lineicons.css"
@@ -186,12 +190,14 @@ export default class ZnIcon extends ZincElement {
           'icon--violet': this.color === "violet",
           'icon--pink': this.color === "pink",
           'icon--grey': this.color === "grey",
-          'icon--avatar': this.library === "avatar"
+          'icon--avatar': this.library === "avatar",
+          'icon--padded': this.padded,
+          'icon--squared': this.squared,
         })}" style="${styleMap({
           '--icon-size': this.size + "px",
           '--avatar-color': this.color ? null : (this.library === 'avatar' ? this.getColorForAvatar(this.getAvatarInitials(this.src)) : null)
         })}">
-          ${this.library ? html`
+          ${this.library && this.library !== "src" ? html`
             ${choose(this.library, [
               ["material", () => html`<i part="icon" class="mi">${this.src}</i>`],
               ["material-outlined", () => html`<i part="icon" class="mi mi--outlined">${this.src}</i>`],
@@ -208,7 +214,7 @@ export default class ZnIcon extends ZincElement {
               ["avatar", () => html`<span class="avatar__text">${this.getAvatarInitials(this.src)}</span>`]
             ], () => html`Library not supported: ${this.library}`)}` : ''}
 
-          ${!this.library && this.src ? html`
+          ${(!this.library || this.library === 'src') && this.src ? html`
             <img part="icon" src="${this.src}" alt="${this.alt}" class="${this.library}" height="${this.size}"
                  width="${this.size}"/>` : ''}
 

package/src/components/icon/icon.scss

@@ -1,7 +1,6 @@
 @use "../../wc";
 @use "./lni";
 
-
 :host {
   display: inline-block;
   box-sizing: content-box !important;
@@ -10,6 +9,10 @@
   --icon-color: inherit;
 }
 
+:host([split-pane-focus]) .icon-wrapper {
+  cursor: pointer;
+}
+
 .icon-wrapper {
   user-select: none;
   font-family: sans-serif;
@@ -27,7 +30,6 @@
   height: 100%;
 }
 
-
 .icon {
   width: var(--icon-size);
   height: var(--icon-size);
@@ -131,6 +133,17 @@
     }
   }
 
+  &--padded {
+    padding: var(--zn-spacing-small);
+  }
+
+  &--squared {
+    width: auto !important;
+    height: auto !important;
+    aspect-ratio: 1/1;
+    display: block;
+  }
+
   .mi {
     font-family: 'Material Icons';
     font-size: inherit;

package/src/components/inline-edit/inline-edit.component.ts

@@ -5,9 +5,9 @@ import {FormControlController} from "../../internal/form";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query, state} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
-import type {ZincFormControl} from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
 import ZnSelect from "../select";
+import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnInput from "../input";
 
 import styles from './inline-edit.scss';
@@ -103,11 +103,15 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   connectedCallback() {
     super.connectedCallback();
     document.addEventListener('keydown', this.escKeyHandler);
+    document.addEventListener('keydown', this.submitKeyHandler);
+    document.addEventListener('click', this.mouseEventHandler);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('keydown', this.escKeyHandler);
+    document.removeEventListener('keydown', this.submitKeyHandler);
+    document.removeEventListener('click', this.mouseEventHandler);
   }
 
   async firstUpdated() {
@@ -129,14 +133,33 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     }
   }
 
+  mouseEventHandler = (e: MouseEvent) => {
+    if (this.isEditing && !this.contains(e.target as Node)) {
+      this.isEditing = false;
+      this.value = this.defaultValue;
+      this.input.blur();
+    }
+  };
+
   escKeyHandler = (e: KeyboardEvent) => {
     if (e.key === 'Escape' && this.isEditing) {
       this.isEditing = false;
       this.value = this.defaultValue;
+      this.input.blur();
     }
   };
 
-  handleEditClick = () => {
+  submitKeyHandler = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' && this.isEditing) {
+      this.isEditing = false;
+      this.formControlController.submit();
+      this.input.blur();
+    }
+  }
+
+  handleEditClick = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (this.disabled) {
       return;
     }
@@ -235,6 +258,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                 name="${this.name}"
                 size="${this.size}"
                 value="${this.value}"
+                placeholder="${this.placeholder}"
                 help-text="${ifDefined(this.helpText)}"
                 pattern=${ifDefined(this.pattern)}
                 @zn-input="${this.handleInput}"
@@ -249,6 +273,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                 name="${this.name}"
                 size="${this.size}"
                 value="${this.value}"
+                placeholder="${this.placeholder}"
                 help-text="${ifDefined(this.helpText)}"
                 pattern=${ifDefined(this.pattern)}
                 @zn-input="${this.handleInput}"
@@ -263,7 +288,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                  value="${this.value}"
                  help-text="${ifDefined(this.helpText)}"
                  size="${this.size}"
-                 placeholder=" ${this.placeholder}"
+                 placeholder="${this.placeholder}"
                  @zn-input="${this.handleInput}"
                  @zn-blur="${this.handleBlur}">
         ${Object.keys(this.options).map(key => html`

package/src/components/inline-edit/inline-edit.scss

@@ -26,6 +26,10 @@
       line-height: var(--zn-line-height-looser);
     }
 
+    .ai__input::part(display-input) {
+      color: rgb(var(--zn-text));
+    }
+
     .ai__input::part(input), .ai__input::part(combobox) {
       padding: 0;
       color: rgb(var(--zn-text));
@@ -91,7 +95,6 @@
   &--editing {
     .ai__right {
       display: flex !important;
-      align-items: start;
     }
   }
 

package/src/components/input/input.scss

@@ -12,7 +12,7 @@
   justify-content: start;
   position: relative;
   width: 100%;
-  box-shadow: var(--zn-shadow-medium);
+  box-shadow: var(--zn-shadow-x-small);
   font-family: var(--zn-input-font-family), sans-serif;
   font-weight: var(--zn-input-font-weight);
   letter-spacing: var(--zn-input-letter-spacing);

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

@@ -30,6 +30,8 @@ export default class ZnItem extends ZincElement {
 
   @property() caption: string;
 
+  @property() description: string;
+
   @property({type: Boolean}) stacked: boolean;
 
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
@@ -46,6 +48,9 @@ export default class ZnItem extends ZincElement {
 
   @property({type: Boolean, attribute: 'no-padding'}) noPadding: boolean;
 
+  // align items to the right
+  @property({type: Boolean, attribute: 'align-end'}) alignEnd: boolean;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'listitem');
@@ -63,37 +68,43 @@ export default class ZnItem extends ZincElement {
   render() {
     const hasIcon = this.icon && this.icon.length > 0;
 
+    const headings = html`
+      <div class="item__headings">
+        <div class="item__caption" part="caption">${this.caption}</div>
+        ${this.description ? html`<div class="item__description">${this.description}</div>` : ''}
+      </div>`;
+
     return html`
       <div
         class=${classMap({
-          'description-item': true,
-          'description-item--stacked': this.stacked,
-          'description-item--edit-on-hover': this.editOnHover,
-          'description-item--inline': this.inline,
-          'description-item--grid': this.grid,
-          'description-item--small': this.size === 'small',
-          'description-item--medium': this.size === 'medium',
-          'description-item--large': this.size === 'large',
-          'description-item--has-icon': hasIcon,
-          'description-item--no-padding': this.noPadding
+          'item': true,
+          'item--stacked': this.stacked,
+          'item--edit-on-hover': this.editOnHover,
+          'item--inline': this.inline,
+          'item--grid': this.grid,
+          'item--small': this.size === 'small',
+          'item--medium': this.size === 'medium',
+          'item--large': this.size === 'large',
+          'item--has-icon': hasIcon,
+          'item--no-padding': this.noPadding,
+          'item--align-end': this.alignEnd
         })}
         part="base">
 
         ${this.icon ? html`
-          <div class="description-item__header">
-            <div class="description-item__icon">
+          <div class="item__header">
+            <div class="item__icon">
               <zn-icon src="${this.icon}" size="20" part="icon"></zn-icon>
             </div>
-            <div class="description-item__caption" part="caption">${this.caption}</div>
-          </div>` : html`
-          <div class="description-item__caption" part="caption">${this.caption}</div>`}
+            ${headings}
+          </div>` : headings}
 
-        <div class="description-item__content">
-          <div class="description-item__content-inner">
+        <div class="item__content">
+          <div class="item__content-inner">
             <slot>${this.value}</slot>
           </div>
-          <div class="description-item__action-wrapper">
-            <slot name="actions" class="description-item__actions"></slot>
+          <div class="item__action-wrapper">
+            <slot name="actions" class="item__actions"></slot>
           </div>
         </div>
       </div>

package/src/components/item/item.scss

@@ -7,10 +7,11 @@
   --zn-item-label-max-width: 300px;
 }
 
-.description-item {
+.item {
   display: flex;
   flex-direction: row;
   padding: 0 var(--zn-spacing-medium);
+  gap: var(--zn-spacing-2x-small);
 
   @include wc.container-query(null, md) {
     --zn-item-label-max-width: 200px;
@@ -26,9 +27,7 @@
   }
 
   &--has-icon {
-    align-items: flex-start !important;
-
-    .description-item__icon {
+    .item__icon {
       position: relative;
       line-height: 33px;
       display: flex;
@@ -38,32 +37,54 @@
     }
   }
 
+  &--align-end .description-item__content {
+    text-align: right;
+  }
+
   &__header {
     display: flex;
+    align-items: center;
     max-width: var(--zn-item-label-max-width);
     width: 100%;
 
-    .description-item__caption {
+    .item__caption {
       width: unset;
       max-width: unset;
     }
   }
 
+  &__headings {
+    display: flex;
+    flex-direction: column;
+    max-width: var(--zn-item-label-max-width);
+    width: 100%;
+    flex-shrink: 0;
+  }
+
   &__content {
     width: 100%;
     display: flex;
     justify-content: space-between;
-    line-height: 30px;
+    line-height: 33px;
   }
 
   &__content-inner {
     width: 100%;
+
+    ::slotted(a) {
+      color: rgb(var(--zn-primary)) !important;
+    }
+
+    ::slotted(zn-icon) {
+      vertical-align: middle;
+      margin-right: var(--zn-spacing-2x-small);
+    }
   }
 
   &__caption {
     font-weight: 500;
     color: rgb(var(--zn-text-heading));
-    line-height: 33px;
+    line-height: var(--zn-line-height-normal);
     max-width: var(--zn-item-label-max-width);
     width: 100%;
     flex-shrink: 0;
@@ -73,8 +94,20 @@
     }
   }
 
+  &__description {
+    display: block;
+    font-weight: 400;
+    margin: var(--zn-spacing-2x-small) 0 0;
+    font-size: var(--zn-font-size-small);
+    color: rgb(var(--zn-text-color));
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &__action-wrapper {
     display: inline-block;
+    align-content: center;
   }
 
   &__actions {
@@ -86,11 +119,11 @@
 
   // Sizes
   &--small {
-    &.description-item {
+    &.item {
       padding: var(--zn-spacing-x-small);
     }
 
-    .description-item__caption, .description-item__content-inner {
+    .item__caption, .item__content-inner {
       font-size: var(--zn-font-size-small);
     }
 
@@ -110,7 +143,7 @@
       display: none;
     }
 
-    .description-item__actions {
+    .item__actions {
       display: none;
     }
 
@@ -119,7 +152,7 @@
         display: flex;
       }
 
-      .description-item__actions {
+      .item__actions {
         display: flex;
       }
     }
@@ -129,20 +162,29 @@
 
     gap: var(--zn-spacing-small);
 
-    .description-item__header {
+    .item__header {
       width: unset;
       max-width: unset;
     }
 
-    .description-item__icon {
+    .item__icon {
       margin-right: 0;
     }
 
-    .description-item__caption {
+    .item__caption {
       width: unset;
       max-width: unset;
     }
 
+    .item__headings {
+      width: unset;
+      max-width: unset;
+    }
+
+    .item__description {
+      margin: 0;
+    }
+
     @include wc.container-query(null, sm) {
       flex-direction: row;
       align-items: center;

package/src/components/linked-select/linked-select.component.ts

@@ -46,7 +46,7 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
   @property({attribute: 'cache-key'}) cacheKey: string = "";
   @property() label: string = "";
 
-  @query('zn-select') input: HTMLInputElement;
+  @query('zn-select') input: ZnSelect;
 
   private linkedSelectElement: HTMLSelectElement | ZnSelect;
   private readonly formControlController = new FormControlController(this, {
@@ -60,6 +60,10 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
     }
   });
 
+  get displayLabel() {
+    return (this.input as ZnSelect).displayLabel;
+  }
+
   get validity() {
     return this.input?.validity;
   }

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

@@ -169,6 +169,7 @@ export default class ZnMenu extends ZincElement {
     // get the parent dropdown and close it
     (closestMenu?.closest('zn-dropdown') as ZnDropdown | null)?.hide();
 
+    console.log('emitting select')
     this.emit('zn-select', {detail: {item}});
   }
 

package/src/components/menu/menu.scss

@@ -9,6 +9,6 @@
   min-width: var(--zn-spacing-small-panel);
   overflow: auto;
   overscroll-behavior: none;
-  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-medium);
   background-color: rgb(var(--zn-panel, 255, 255, 255));
 }

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>