@kubex/zinc 1.0.14 → 1.0.16

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/note.md

@@ -9,7 +9,17 @@ layout: component
 
 <zn-note color="gray">
   <span slot="caption">The caption</span>
-  <span>The body</span>
+  <div slot="snippet">This is a short version of the below.</div>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, autem deleniti, dolore dolores ea enim fugit
+  harum incidunt minima numquam possimus praesentium quaerat quasi sequi sunt temporibus ut velit, veniam. Aut dolor
+  eius quae. Consequatur deleniti ipsum itaque pariatur ullam velit! Alias aut delectus dolores esse fuga iure laborum
+  magnam maiores minima, minus, natus placeat provident quasi ratione ullam ut? Fugit nisi placeat quidem suscipit
+  voluptatum? Adipisci aspernatur assumenda consequatur dolore ea esse exercitationem ipsum maiores minima neque saepe,
+  voluptates voluptatibus! A ab adipisci consequatur, esse eveniet itaque sed soluta! Aliquid animi blanditiis dolores
+  dolorum eum facere fugit harum id illo, laboriosam laborum libero magni minus natus nihil perspiciatis porro quae
+  quisquam, ratione rem repellat sequi sit suscipit voluptas voluptatum. Atque delectus eos fugit illo sit soluta
+  suscipit vero? At consectetur culpa dolor, dolores ea earum enim error et expedita iste laudantium nam necessitatibus
+  quaerat, quis sed tempora vel voluptatum?
   <span slot="date">
     <small>11/10/24</small>
   </span>

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.14",
+  "version": "1.0.16",
   "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

@@ -21,7 +21,6 @@
 
   border-width: 1px;
   border-color: transparent;
-  height: 100%;
   display: inline-flex;
   position: relative;
 
@@ -93,7 +92,7 @@
   outline-offset: 2px;
 }
 
-.button--disabled {
+[disabled] {
   cursor: not-allowed;
   opacity: 0.5;
 
@@ -108,11 +107,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 +121,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 +136,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 +144,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 +155,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 +274,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 +290,7 @@
   color: white;
   opacity: 1 !important;
 
-  &:hover {
+  &:hover:not([disabled]) {
     background-color: rgb(var(--btn-color));
   }
 
@@ -304,7 +303,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

@@ -158,6 +158,7 @@ export default class ZnDataTable extends ZincElement {
   @property({attribute: 'data', type: Object, reflect: true}) data: any;
   @property({attribute: 'sort-column'}) sortColumn: string;
   @property({attribute: 'sort-direction'}) sortDirection: string = "asc";
+  @property({attribute: 'local-sort', type: Boolean}) localSort: boolean = false;
   @property({attribute: 'filter'}) filter: string = '';
   @property({attribute: 'wide-column'}) wideColumn: string;
   @property({attribute: 'key'}) key: string = 'id';
@@ -813,7 +814,13 @@ export default class ZnDataTable extends ZincElement {
     return () => {
       this.sortColumn = key;
       this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-      this._dataTask.run().then(r => r);
+
+      if (this.localSort) {
+        this._rows = this.sortLocalData(this._rows as Row[]);
+        this.requestUpdate();
+      } else {
+        this._dataTask.run().then(r => r);
+      }
     };
   }
 
@@ -1051,23 +1058,11 @@ export default class ZnDataTable extends ZincElement {
   }
 
   private getRows(data: Response): Row[] {
-    const sourceRows = data.rows;
-
-    if (this.sortColumn) {
-      const headerKeys = Object.keys(this.headers);
-      const sortIndex = headerKeys.indexOf(this.sortColumn);
-
-      sourceRows.sort((rowA: Row, rowB: Row) => {
-        const getCellForSort = (row: Row): Cell => {
-          const byHeading = row.cells.find((cell: Cell) => cell.column === this.sortColumn);
-          if (byHeading !== undefined) return byHeading as unknown as Cell;
-          return row.cells[sortIndex];
-        };
-
-        const aVal = getCellForSort(rowA);
-        const bVal = getCellForSort(rowB);
-        return this.sortData(aVal, bVal);
-      });
+    // Copy rows to avoid mutating original data
+    const sourceRows = Array.isArray(data.rows) ? data.rows.slice() : [];
+
+    if (this.localSort && this.sortColumn) {
+      return this.sortLocalData(sourceRows);
     }
 
     return sourceRows;
@@ -1136,6 +1131,25 @@ export default class ZnDataTable extends ZincElement {
     return aNormal < bNormal ? 1 : aNormal > bNormal ? -1 : 0;
   }
 
+  private sortLocalData(rows: Row[]): Row[] {
+    if (!this.sortColumn) return rows;
+
+    const headerKeys = Object.keys(this.headers);
+    const sortIndex = headerKeys.indexOf(this.sortColumn);
+
+    const getCellForSort = (row: Row): Cell => {
+      const byHeading = row.cells.find((cell: Cell) => cell.column === this.sortColumn);
+      if (byHeading !== undefined) return byHeading as unknown as Cell;
+      return row.cells[sortIndex];
+    };
+
+    return rows.slice().sort((rowA: Row, rowB: Row) => {
+      const aVal = getCellForSort(rowA);
+      const bVal = getCellForSort(rowB);
+      return this.sortData(aVal, bVal);
+    });
+  }
+
   private loadingTable() {
     return html`
       <div class="table-container">
@@ -1239,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/filter-container/filter-container.component.ts

@@ -1,5 +1,5 @@
-import {property} from 'lit/decorators.js';
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './filter-container.scss';

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;