@kubex/zinc 1.0.15 → 1.0.17

package/docs/pages/components/collapsible.md

@@ -31,10 +31,50 @@ Used instead of directly setting the `expanded` attribute on the element.
 </zn-collapsible>
 ```
 
+### Checkbox stuff
+
+```html:preview
+
+<zn-collapsible caption="Collapsible with Checkbox">
+  <div class="flex-mid" slot="caption">
+    <div class="grow zn-pr">Billing</div>
+    <zn-toggle name="enabled"></zn-toggle>
+  </div>
+  <div class="permission" data-filter="Example Permission">
+    <div class="flex-row zn-pad">
+      <div class="flex-mid">
+        <div class="grow flex-col flex-jc">
+          <strong>Example Permission</strong>
+          <span>Example Permission Description</span>
+        </div>
+        <div class="flex-mid">
+          <zn-toggle class="permission-toggle" name="enabled" value="1" fallback="0" size="medium">
+          </zn-toggle>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="permission" data-filter="Example Permission">
+    <div class="flex-row zn-pad">
+      <div class="flex-mid">
+        <div class="grow flex-col flex-jc">
+          <strong>Example Permission 2</strong>
+          <span>Example Permission 2 Description</span>
+        </div>
+        <div class="flex-mid">
+          <zn-toggle name="enabled" size="medium"></zn-toggle>
+        </div>
+      </div>
+    </div>
+  </div>
+</zn-collapsible>
+```
+
 ### Expanded Attribute
 
 ```html:preview
-<zn-collapsible caption="Expanded Attribute" 
+
+<zn-collapsible caption="Expanded Attribute"
                 description="Adding the expanded attribute will open the collapsible"
                 expanded>
   <zn-button>Button</zn-button>

package/docs/pages/components/select.md

@@ -18,10 +18,10 @@ instead.
 ```html:preview
 
 <form method="get" action="#">
-  <zn-select name="something" label="Select one option" value="0">
+  <zn-select name="something" label="Select one option">
     <zn-option value="0">Option 0</zn-option>
     <zn-option value="1">Option 1</zn-option>
-    <zn-option value="2">Option 2</zn-option>
+    <zn-option value="2" selected>Option 2</zn-option>
     <zn-option value="3">Option 3</zn-option>
     <zn-option value="4">Option 4</zn-option>
     <zn-option value="5">Option 5</zn-option>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/shared/_button.scss

@@ -17,7 +17,7 @@
   border-color: transparent;
   white-space: nowrap;
 
-  &:hover {
+  &:hover:not([disabled]) {
     background-color: rgba(var(--zn-primary), 0.8);
   }
 }

package/src/components/button/button.component.ts

@@ -1,5 +1,5 @@
 import {classMap} from 'lit/directives/class-map.js';
-import {type CSSResultGroup, unsafeCSS} from 'lit';
+import {type CSSResultGroup, nothing, unsafeCSS} from 'lit';
 import {FormControlController, validValidityState} from "../../internal/form";
 import {HasSlotController} from '../../internal/slot';
 import {html, literal} from 'lit/static-html.js';
@@ -339,7 +339,6 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--text': (this.text && !this.outline),
           'button--grow': this.grow,
           'button--standard': !this.outline && !this.text,
-          'button--disabled': this.disabled,
           'button--with-icon': this.icon,
           'button--icon-left': this.iconPosition === 'left',
           'button--icon-right': this.iconPosition === 'right',
@@ -356,6 +355,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
         rel="${ifDefined(isLink ? this.rel : undefined)}"
         gaid="${ifDefined(this.gaid)}"
         data-notification="${ifDefined(this.notification)}"
+        disabled=${this.disabled || nothing}
         @click="${this.handleClick}">
         ${this.iconPosition === 'left' ? icon : ''}
         <slot part="label"

package/src/components/button/button.scss

@@ -93,7 +93,7 @@
   outline-offset: 2px;
 }
 
-.button--disabled {
+[disabled] {
   cursor: not-allowed;
   opacity: 0.5;
 
@@ -108,11 +108,11 @@
     border-color: var(--zn-color-neutral-50);
     color: rgb(var(--zn-primary));
 
-    &:hover:not(.button--disabled) {
+    &:hover:not([disabled]) {
       background-color: var(--zn-color-neutral-100)
     }
 
-    &:active:not(.button--disabled) {
+    &:active:not([disabled]) {
       background-color: var(--zn-color-neutral-100)
     }
   }
@@ -122,11 +122,11 @@
   border-color: rgb(var(--btn-color));
   color: rgba(255, 255, 255, 0.9);
 
-  &:hover:not(.button--disabled) {
+  &:hover:not([disabled]) {
     background-color: rgba(var(--btn-color), 0.8);
   }
 
-  &:active:not(.button--disabled) {
+  &:active:not([disabled]) {
     background-color: rgba(var(--btn-color));
   }
 }
@@ -137,7 +137,7 @@
   border-color: rgb(var(--btn-color));
   color: rgb(var(--btn-color));
 
-  &:hover:not(.button--disabled), &:active:not(.button--disabled) {
+  &:hover:not([disabled]), &:active:not([disabled]) {
     background-color: rgb(var(--btn-color));
     color: white;
   }
@@ -145,7 +145,7 @@
   &.button--secondary {
     border-color: #F3EFFF;
 
-    &:hover:not(.button--disabled), &:active:not(.button--disabled) {
+    &:hover:not([disabled]), &:active:not([disabled]) {
       background-color: rgb(221, 218, 236);
     }
   }
@@ -156,7 +156,7 @@
   background: none;
   color: rgb(var(--btn-color));
 
-  &:hover:not(.button--disabled), &:active:not(.button--disabled) {
+  &:hover:not([disabled]), &:active:not([disabled]) {
     background-color: rgba(var(--btn-color), 0.1);
   }
 
@@ -275,11 +275,11 @@
   border-color: transparent !important;
   color: inherit;
 
-  &:hover:not(.button--disabled) {
+  &:hover:not([disabled]) {
     background-color: rgba(var(--zn-primary), 0.1);
   }
 
-  &:active:not(.button--disabled) {
+  &:active:not([disabled]) {
     background-color: rgba(var(--zn-primary), 0.2);
   }
 }
@@ -291,7 +291,7 @@
   color: white;
   opacity: 1 !important;
 
-  &:hover {
+  &:hover:not([disabled]) {
     background-color: rgb(var(--btn-color));
   }
 
@@ -304,7 +304,7 @@
     border-color: rgb(var(--btn-color));
     color: rgb(var(--btn-color));
 
-    &:hover, &:active {
+    &:hover:not([disabled]), &:active:not([disabled]) {
       background-color: rgba(var(--btn-color));
       color: white;
     }

package/src/components/collapsible/collapsible.component.ts

@@ -1,11 +1,13 @@
-import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
-import {property, state} from 'lit/decorators.js';
-import {Store} from "../../internal/storage";
+import { classMap } from "lit/directives/class-map.js";
+import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { HasSlotController } from "../../internal/slot";
+import { property, state } from 'lit/decorators.js';
+import { Store } from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './collapsible.scss';
-import {HasSlotController} from "../../internal/slot";
+import { ZnInputEvent } from "../../events/zn-input";
+import ZnToggle from "../toggle";
 
 /**
  * @summary Toggles between showing and hiding content when clicked
@@ -21,28 +23,28 @@ import {HasSlotController} from "../../internal/slot";
 export default class ZnCollapsible extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  @property({reflect: true}) caption = '';
+  @property({ reflect: true }) caption = '';
 
-  @property({reflect: true}) description = '';
+  @property({ reflect: true }) description: string;
 
-  @property({reflect: true}) label = '';
+  @property({ reflect: true }) label = '';
 
-  @property({type: Boolean, attribute: 'show-number', reflect: true}) showNumber: boolean = false;
+  @property({ type: Boolean, attribute: 'show-number', reflect: true }) showNumber: boolean = false;
 
   // what element name to count
-  @property({type: String, attribute: 'count-element'}) countElement: string = '*';
+  @property({ type: String, attribute: 'count-element' }) countElement: string = '*';
 
-  @property({type: Boolean, reflect: true}) expanded: boolean = false;
+  @property({ type: Boolean, reflect: true }) expanded: boolean = false;
 
-  @property({attribute: 'default'}) defaultState: 'open' | 'closed';
+  @property({ attribute: 'default' }) defaultState: 'open' | 'closed';
 
-  @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
+  @property({ attribute: 'local-storage', type: Boolean, reflect: true }) localStorage: boolean;
 
-  @property({attribute: 'store-key', reflect: true}) storeKey: string = "";
+  @property({ attribute: 'store-key', reflect: true }) storeKey: string = "";
 
-  @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 0;
+  @property({ attribute: 'store-ttl', type: Number, reflect: true }) storeTtl = 0;
 
-  @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
+  @property({ attribute: 'flush', type: Boolean, reflect: true }) flush: boolean = false;
 
   @state() numberOfItems: number = 0;
 
@@ -52,7 +54,9 @@ export default class ZnCollapsible extends ZincElement {
 
   private observer: MutationObserver;
 
-  connectedCallback() {
+  private showArrow: boolean = true;
+
+  async connectedCallback() {
     super.connectedCallback();
     this._store = new Store(this.localStorage ? window.localStorage : window.sessionStorage, "zncla:", this.storeTtl);
     this.expanded = this.defaultState === 'open';
@@ -70,7 +74,28 @@ export default class ZnCollapsible extends ZincElement {
       this.observer = new MutationObserver(() => {
         this.recalculateNumberOfItems();
       });
-      this.observer.observe(slot, {childList: true, subtree: true});
+      this.observer.observe(slot, { childList: true, subtree: true });
+    }
+
+    await this.updateComplete;
+
+    const captionSlot = this.hasSlotController.getSlot('caption') as HTMLDivElement;
+    if (captionSlot) {
+      const toggles = captionSlot.querySelectorAll('zn-toggle');
+      // remove the drop arrow
+      this.showArrow = false;
+      toggles.forEach(toggle => {
+        toggle.removeEventListener('zn-input', this.handleCaptionToggle);
+        toggle.addEventListener('zn-input', this.handleCaptionToggle);
+      });
+    }
+  }
+
+  // this is for handling global toggles
+  public handleCaptionToggle = (e: ZnInputEvent) => {
+    const toggle = e.target as ZnToggle;
+    if (toggle) {
+      this.expanded = toggle.checked;
     }
   }
 
@@ -82,6 +107,11 @@ export default class ZnCollapsible extends ZincElement {
   }
 
   handleCollapse = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName.toLowerCase() === 'input' && (target as HTMLInputElement).type === 'checkbox') {
+      return;
+    }
+
     if (this.expanded) {
       this.expanded = false;
       e.stopPropagation();
@@ -112,13 +142,16 @@ export default class ZnCollapsible extends ZincElement {
             <p class="caption">
               <slot name="caption">${this.caption}</slot>
             </p>
-            <p class="description">${this.description}</p>
+            <p class="description">
+              <slot name="description">${this.description}</slot>
+            </p>
           </div>
           <div class="header__right">
             <slot name="label"><p class="label">${this.label}</p></slot>
             ${this.showNumber && !this.expanded ? html`
               <zn-chip size="small" type="primary">${this.numberOfItems}</zn-chip>` : ''}
-            <zn-icon library="material-outlined" src="expand_more" class="expand"></zn-icon>
+            ${this.showArrow  ? html`
+              <zn-icon library="material-outlined" src="expand_more" class="expand"></zn-icon>` : ''}
           </div>
         </slot>
         <div class="${classMap({

package/src/components/collapsible/collapsible.scss

@@ -20,6 +20,8 @@
   .caption {
     font-weight: 600;
     margin: 0;
+    flex-grow: 1;
+    width: 100%;
     color: rgb(var(--zn-text-heading));
   }
 

package/src/components/confirm/confirm.component.ts

@@ -1,9 +1,9 @@
 import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
-import {property, query} from 'lit/decorators.js';
+import {property, query, state} from 'lit/decorators.js';
 import ZincElement from "../../internal/zinc-element";
 import ZnDialog from "../dialog";
 
@@ -61,6 +61,11 @@ export default class ZnConfirm extends ZincElement {
 
   @property({type: Boolean, attribute: 'hide-icon'}) hideIcon: boolean = false;
 
+  /**
+   * Show a loading state when the dialog is submitted.
+   */
+  @property({type: Boolean, attribute: 'show-loading'}) showLoading: boolean = false;
+
   /**
    * The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you
    * will need to manually open the dialog using the `show()` method.
@@ -75,6 +80,9 @@ export default class ZnConfirm extends ZincElement {
 
   @query('zn-dialog') dialog: ZnDialog;
 
+  /** Internal loading state used when showLoading is enabled */
+  @state() private loading: boolean = false;
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     if (this.open) {
@@ -108,10 +116,12 @@ export default class ZnConfirm extends ZincElement {
   show = (event: Event | undefined = undefined) => {
     const trigger = event?.target as HTMLButtonElement
     if (trigger?.disabled) return;
+    this.loading = false;
     this.dialog.show();
   }
 
   hide() {
+    this.loading = false;
     this.dialog.hide();
   }
 
@@ -143,12 +153,18 @@ export default class ZnConfirm extends ZincElement {
           : ''}
 
         <div class="confirm-dialog__content">
-          ${this.content ? html`${this.content}` : ''}
-          <slot></slot>
+          ${!this.loading ? html`
+            ${this.content ? html`${this.content}` : ''}
+            <slot></slot>` : html`
+            Loading...`}
         </div>
 
-        <zn-button outline color="${this.type}" slot="footer" dialog-closer>${this.cancelText}</zn-button>
-        <zn-button color="${this.type}" slot="footer" @click="${this.submitDialog}"> ${this.confirmText}</zn-button>
+        <zn-button outline color="${this.type}" slot="footer" dialog-closer disabled=${this.loading || nothing}>
+          ${this.cancelText}
+        </zn-button>
+        <zn-button color="${this.type}" slot="footer" @click="${this.submitDialog}" disabled=${this.loading || nothing}>
+          ${this.confirmText}
+        </zn-button>
 
         <slot name="footer-text" slot="footer-text">${this.footerText}</slot>
       </zn-dialog>`;
@@ -174,7 +190,12 @@ export default class ZnConfirm extends ZincElement {
         detail: {element: form}
       }))
       form.requestSubmit();
-      this.hide();
+      if (!this.showLoading) {
+        this.hide();
+      } else {
+        this.loading = true;
+        this.dialog.closer.disabled = true;
+      }
     }
   }
 }

package/src/components/data-table/data-table.component.ts

@@ -1253,8 +1253,9 @@ export default class ZnDataTable extends ZincElement {
                               type="${ifDefined(action.confirmType)}"
                               caption="${action.confirmTitle}"
                               content="${action.confirmContent}"
-                              action="${action.uri}"></zn-confirm>
-                  <zn-menu-item id="${triggerId}">
+                              action="${action.uri}"
+                              show-loading></zn-confirm>
+                  <zn-menu-item id="${triggerId}" confirm>
                     ${(action.icon) ? html`
                       <zn-icon src="${action.icon}" size="20" slot="prefix"></zn-icon>` : html``}
                     ${action.text}

package/src/components/data-table/data-table.scss

@@ -19,7 +19,7 @@ table {
   text-align: left;
 
   tbody tr:nth-of-type(even) {
-    background-color: unset !important;
+    background-color: unset;
   }
 
   tbody tr.table__row--data.table__row--odd:not(.table__row--selected) td {

package/src/components/dialog/dialog.component.ts

@@ -57,9 +57,7 @@ export default class ZnDialog extends ZincElement {
   private closeWatcher: CloseWatcher | null;
 
   @query('.dialog') dialog: HTMLDialogElement;
-  @query('.dialog__panel') panel: HTMLElement;
-  @query('.dialog__overlay') overlay: HTMLElement;
-
+  @query('.dialog__close') closer: HTMLButtonElement;
 
   /** The dialog's theme variant. */
   @property({reflect: true}) variant: 'default' | 'warning' | 'announcement' = 'default';

package/src/components/input/input.component.ts

@@ -268,7 +268,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   }
 
   private handleChange() {
-    if (this.type === 'currency') {
+    if (this.type === 'currency' && this.input.value) {
       this.value = parseFloat(this.input.value as string).toFixed(2)
     } else {
       this.value = this.input.value;

package/src/components/note/note.component.ts

@@ -1,11 +1,11 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type colors} from "../data-select/providers/color-data-provider";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
 import {property, state} from "lit/decorators.js";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './note.scss';
-import {HasSlotController} from "../../internal/slot";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -61,9 +61,12 @@ export default class ZnNote extends ZincElement {
       })}">
         <div class="note__header">
           <slot name="caption" class="note__header__caption">${this.caption}</slot>
-          <slot name="date" class="note__header__date">
-            <small>${this.date}</small>
-          </slot>
+          <div class="note__header__end">
+            <slot name="date" class="note__header__date">
+              <small>${this.date}</small>
+            </slot>
+            <slot name="action"></slot>
+          </div>
         </div>
 
         ${this.expanded && showExpandableButton ?

package/src/components/note/note.scss

@@ -40,6 +40,11 @@ $colors: (
     &__date {
       font-size: var(--zn-font-size-small);
     }
+
+    &__end {
+      display: flex;
+      gap: var(--zn-spacing-small);
+    }
   }
 
   &__body-container {

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

@@ -1,8 +1,8 @@
-import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
-import {LocalizeController} from "../../utilities/localize";
-import {property, query, state} from 'lit/decorators.js';
-import {watch} from '../../internal/watch';
+import { classMap } from "lit/directives/class-map.js";
+import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { LocalizeController } from "../../utilities/localize";
+import { property, query, state } from 'lit/decorators.js';
+import { watch } from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
 
@@ -28,7 +28,7 @@ import styles from './option.scss';
  */
 export default class ZnOption extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
-  static dependencies = {'zn-icon': ZnIcon};
+  static dependencies = { 'zn-icon': ZnIcon };
 
   private cachedTextLabel: string;
   // @ts-expect-error - Controller is currently unused
@@ -39,7 +39,6 @@ export default class ZnOption extends ZincElement {
   @query('.option__label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
-  @state() selected = false; // the option is selected and has aria-selected="true"
   @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
 
   /**
@@ -47,10 +46,12 @@ export default class ZnOption extends ZincElement {
    * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
    * multiple values.
    */
-  @property({reflect: true}) value = '';
+  @property({ reflect: true }) value = '';
 
   /** Draws the option in a disabled state, preventing selection. */
-  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ type: Boolean, reflect: true }) selected = false;
 
   connectedCallback() {
     super.connectedCallback();
@@ -70,7 +71,7 @@ export default class ZnOption extends ZincElement {
     // When the label changes, emit a slotchange event so parent controls see it
     if (textLabel !== this.cachedTextLabel) {
       this.cachedTextLabel = textLabel;
-      this.emit('slotchange', {bubbles: true, composed: false, cancelable: false});
+      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
     }
   }
 

package/src/components/order-table/order-table.scss

@@ -68,7 +68,6 @@
 
 .row {
   background-color: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity, 1));
-  margin-top: 20px;
 }
 
 .header-item {
@@ -101,6 +100,10 @@
   @include wc.container-query(md) {
     border-bottom: none;
   }
+
+  &:first-of-type {
+    margin-top: 0;
+  }
 }
 
 .sub {