@kubex/zinc 1.0.113 → 1.0.115

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

@@ -3,6 +3,7 @@ import {type CSSResultGroup, html, nothing, type TemplateResult, unsafeCSS} from
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {ref} from "lit/directives/ref.js";
 import {Task} from "@lit/task";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
@@ -222,7 +223,14 @@ export default class ZnDataTable extends ZincElement {
   private _initialLoad = true;
   private _lastTableContent: TemplateResult = html``;
 
-  private resizeObserver: ResizeObserver;
+  private readonly resizeObserver = new ResizeController(this, {
+    target: null,
+    callback: () => {
+      if (this.tableContainer) {
+        this.tableContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+      }
+    },
+  });
 
   private itemsPerPage: number = DEFAULT_PER_PAGE;
   private page: number = DEFAULT_PAGE;
@@ -384,22 +392,12 @@ export default class ZnDataTable extends ZincElement {
 
   connectedCallback() {
     super.connectedCallback();
-
-    this.resizeObserver = new ResizeObserver(() => {
-      if (this.tableContainer) {
-        this.tableContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
-      }
-    });
-
     this.addEventListener('zn-filter-change', this.filterChangeListener);
     this.addEventListener('zn-search-change', this.searchChangeListener);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
     this.removeEventListener('zn-filter-change', this.filterChangeListener);
     this.removeEventListener('zn-search-change', this.searchChangeListener);
   }
@@ -796,9 +794,7 @@ export default class ZnDataTable extends ZincElement {
     this.numberOfRowsSelected = 0;
     this._dataTask.run().then(r => r);
 
-    if (this.resizeObserver) {
-      this.resizeObserver.observe(this);
-    }
+    this.resizeObserver.observe(this);
   }
 
   goToFirstPage() {

package/src/components/dialog/dialog.scss

@@ -19,6 +19,10 @@
   overflow: auto;
 }
 
+.dialog__header + .dialog__body {
+  padding-top: 0;
+}
+
 .dialog {
   flex-direction: column;
   z-index: 2;

package/src/components/editor/modules/toolbar/toolbar.component.ts

@@ -1,6 +1,7 @@
 import {colorDataProvider} from "../../../data-select/providers/color-data-provider";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from "lit";
 import {property, query, queryAll} from "lit/decorators.js";
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import ZincElement from "../../../../internal/zinc-element";
 import ZnButton from "../../../button";
 import ZnEditorTool from "./tool";
@@ -24,30 +25,25 @@ export default class ToolbarComponent extends ZincElement {
   @query('.toolbar__group--overflow') private _overflowGroup!: HTMLElement;
 
   private _featureConfig: EditorFeatureConfig = {};
-  private _resizeObserver: ResizeObserver | null = null;
   private _resizeId: number | null = null;
 
+  private readonly _resizeObserver = new ResizeController(this, {
+    callback: () => this.handleResize(),
+  });
+
   // Tracks DOM nodes (e.g. emoji/date pickers) temporarily moved into the overflow submenu so we can restore them
   private _movedContent: Map<HTMLElement, { placeholder: Comment; originalParent: HTMLElement }> = new Map();
 
   connectedCallback() {
     super.connectedCallback();
     this.containerWidth = this.offsetWidth;
-
-    this._resizeObserver = new ResizeObserver(this.handleResize.bind(this));
     if (this.parentElement) {
       this._resizeObserver.observe(this.parentElement);
     }
-    this._resizeObserver.observe(this as HTMLElement);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-      this._resizeObserver = null;
-    }
     if (this._resizeId !== null) {
       cancelAnimationFrame(this._resizeId);
       this._resizeId = null;

package/src/components/expanding-action/expanding-action.component.ts

@@ -2,6 +2,7 @@ import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {md5} from "../../utilities/md5";
+import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property} from 'lit/decorators.js';
 import {styleMap} from "lit/directives/style-map.js";
 import ZincElement from '../../internal/zinc-element';
@@ -54,8 +55,36 @@ export default class ZnExpandingAction extends ZincElement {
   private _knownUri: Map<string, string> = new Map<string, string>();
   private _actions: HTMLElement[] = [];
   private _preload = true;
-  private _countObserver?: MutationObserver;
-  private _colorObserver?: MutationObserver;
+  private _metaObserved = false;
+
+  private readonly _countObserver = new MutationController(this, {
+    target: null,
+    config: {subtree: true, attributes: true, attributeFilter: ['content'], childList: true},
+    callback: () => {
+      const appContent = deepQuerySelectorAll('app-content', this, '')[0];
+      const metaCount = appContent?.shadowRoot?.querySelector('meta[name="count"]');
+      if (!metaCount) return;
+      const count = metaCount.getAttribute('content');
+      const notification = this.shadowRoot?.querySelector('.expanding-action__dropdown zn-button');
+      if (count && notification) {
+        notification.setAttribute('notification', count);
+      }
+    },
+  });
+
+  private readonly _colorObserver = new MutationController(this, {
+    target: null,
+    config: {subtree: true, attributes: true, attributeFilter: ['content'], childList: true},
+    callback: () => {
+      const appContent = deepQuerySelectorAll('app-content', this, '')[0];
+      const metaColor = appContent?.shadowRoot?.querySelector('meta[name="color"]');
+      if (!metaColor) return;
+      const color = metaColor.getAttribute('content');
+      if (color) {
+        this.color = color;
+      }
+    },
+  });
 
   constructor() {
     super();
@@ -75,12 +104,6 @@ export default class ZnExpandingAction extends ZincElement {
     this._panel = this.shadowRoot?.querySelector('#content');
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._countObserver?.disconnect();
-    this._colorObserver?.disconnect();
-  }
-
   firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
 
@@ -97,43 +120,14 @@ export default class ZnExpandingAction extends ZincElement {
   }
 
   _observeMetaData() {
+    if (this._metaObserved) return;
     const appContent = deepQuerySelectorAll('app-content', this, '')[0];
+    const root = appContent?.shadowRoot;
+    if (!root) return;
 
-    this._countObserver = new MutationObserver(() => {
-      const metaCount = appContent?.shadowRoot?.querySelector('meta[name="count"]');
-      if (!metaCount) {
-        return;
-      }
-      const count = metaCount.getAttribute('content');
-      const notification = this.shadowRoot?.querySelector('.expanding-action__dropdown zn-button');
-      if (count && notification) {
-        notification.setAttribute('notification', count);
-      }
-    });
-
-    this._colorObserver = new MutationObserver(() => {
-      const metaColor = appContent?.shadowRoot?.querySelector('meta[name="color"]');
-      if (!metaColor) {
-        return;
-      }
-      const color = metaColor.getAttribute('content');
-      if (color) {
-        this.color = color;
-      }
-    });
-
-    const root = appContent.shadowRoot;
-    if (root) {
-      const options: MutationObserverInit = {
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['content'],
-        childList: true,
-      };
-
-      this._countObserver.observe(root, options);
-      this._colorObserver.observe(root, options);
-    }
+    this._countObserver.observe(root as unknown as Element);
+    this._colorObserver.observe(root as unknown as Element);
+    this._metaObserved = true;
   }
 
   _registerActions() {

package/src/components/form-group/form-group.component.ts

@@ -34,6 +34,8 @@ export default class ZnFormGroup extends ZincElement {
 
   /** The form groups help text. If you need to display HTML, use the `help-text` slot instead. */
   @property({attribute: 'help-text'}) helpText = '';
+  @property({attribute: 'cols', type: Boolean}) forceCols = false;
+  @property({attribute: 'layout', type: String}) layout = "1,2";
 
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
@@ -46,42 +48,45 @@ export default class ZnFormGroup extends ZincElement {
     return html`
       <fieldset
         part="form-control"
-        class=${classMap({
+        class="${classMap({
           'form-control': true,
           'form-control--has-label': hasLabel,
           'form-control--has-label-tooltip': hasLabelTooltip,
           'form-control--has-help-text': hasHelpText
-        })}
+        })}"
         aria-labelledby="label"
         aria-describedby="help-text">
 
-        <zn-cols layout="1,2" mc="2" part="form-control-container" class="form-control__container">
-          ${hasLabel ? html`
+        <zn-cols layout="${this.layout}" part="form-control-container" class="form-control__container">
+          ${hasLabel || hasHelpText || this.forceCols ? html`
             <div>
-              <label
-                part="form-control-label"
-                id="label"
-                class="form-control__label"
-                aria-hidden=${hasLabel ? 'false' : 'true'}>
-                <slot name="label">${this.label}</slot>
-                ${hasLabelTooltip
-                  ? html`
-                    <zn-tooltip class="form-control--label-tooltip">
-                      <div slot="content">
-                        <slot name="label-tooltip">${this.labelTooltip}</slot>
-                      </div>
-                      <zn-icon src="info"></zn-icon>
-                    </zn-tooltip>`
-                  : ''}
-              </label>
-            </div>` : html``}
 
-          ${hasHelpText ? html`
-            <div
-              part="form-control-help-text"
-              id="help-text"
-              class="form-control__help-text">
-              <slot name="help-text">${this.helpText}</slot>
+              ${hasLabel ? html`
+                <label
+                  part="form-control-label"
+                  id="label"
+                  class="form-control__label"
+                  aria-hidden="${hasLabel ? 'false' : 'true'}">
+                  <slot name="label">${this.label}</slot>
+                  ${hasLabelTooltip
+                    ? html`
+                      <zn-tooltip class="form-control--label-tooltip">
+                        <div slot="content">
+                          <slot name="label-tooltip">${this.labelTooltip}</slot>
+                        </div>
+                        <zn-icon src="info"></zn-icon>
+                      </zn-tooltip>`
+                    : ''}
+                </label>` : html``}
+
+              ${hasHelpText ? html`
+                <div
+                  part="form-control-help-text"
+                  id="help-text"
+                  class="form-control__help-text">
+                  <slot name="help-text">${this.helpText}</slot>
+                </div>` : html``}
+
             </div>` : html``}
 
           <div part="form-control-input" class="form-control-input">

package/src/components/form-group/form-group.scss

@@ -5,6 +5,7 @@
   display: block;
   line-height: var(--zn-line-height-dense);
   max-width: var(--zn-container-lg);
+  --zn-col-gap: calc(var(--zn-spacing-medium, 20px) * 3)
 }
 
 .form-control {

package/src/components/header/header.component.ts

@@ -4,7 +4,7 @@ import {HasSlotController} from "../../internal/slot";
 import {property} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
-import type ZnNavbar from "../navbar";
+import ZnNavbar from "../navbar";
 
 import styles from './header.scss';
 
@@ -51,6 +51,8 @@ export default class ZnHeader extends ZincElement {
 
   @property({attribute: 'previous-target'}) previousTarget: string;
 
+  @property({attribute: 'hide-breadcrumb', type: Boolean}) hideBreadcrumb: boolean = false;
+
   private navbar: ZnNavbar;
 
   // Attach any event listeners you may need
@@ -106,7 +108,7 @@ export default class ZnHeader extends ZincElement {
     const hasPreviousPath = this.previousPath;
     const hasEntityId = this.entityId;
     const hasFullLocation = this.fullLocation;
-    const hasBreadcrumb = this.hasSlotController.test('breadcrumb');
+    const hasBreadcrumb = !this.hideBreadcrumb && this.hasSlotController.test('breadcrumb');
 
     // Do not add formatting within breadcrumb or navigation - css:empty in use
     const header = html`
@@ -137,9 +139,6 @@ export default class ZnHeader extends ZincElement {
 
 
         <div class="content" part="content">
-          ${hasBreadcrumb ? html`
-            <slot name="breadcrumb" class="breadcrumb"></slot>` : null}
-
           ${hasPreviousPath ? html`
             <a href="${this.previousPath}" class="caption__back"
                data-target="${this.previousTarget ? this.previousTarget : ''}">
@@ -156,6 +155,8 @@ export default class ZnHeader extends ZincElement {
               <span class="header__caption" part="header-caption">
                 ${this.icon ? html`
                   <zn-icon class="header__icon" src="${this.icon}"></zn-icon>` : null}
+                ${hasBreadcrumb ? html`
+                  <slot name="breadcrumb" class="breadcrumb"></slot>` : null}
                 <slot name="caption">${this.caption}</slot>
                 </span>
               ${this.description ? html`

package/src/components/header/header.scss

@@ -14,12 +14,14 @@
     justify-content: space-between;
     gap: var(--zn-spacing-2x-small);
     max-width: 100%;
+    min-height: 58px;
   }
 
   &__caption {
     font-weight: var(--zn-font-weight-medium);
-    font-size: var(--zn-font-size-x-large);
+    font-size: var(--zn-font-size-large);
     color: rgba(var(--zn-text-panel-title), 100%);
+    line-height: 28px;
     margin: 0;
     overflow: hidden;
     white-space: nowrap;
@@ -30,17 +32,15 @@
     text-wrap: auto;
   }
 
-  &--has-breadcrumb {
-    .caption {
-      padding-top: 0;
-    }
-  }
-
   // remove the padding on the nav
   &--has-nav {
     .caption {
       padding-bottom: 0;
     }
+
+    .content {
+      padding-bottom: var(--zn-spacing-x-small);
+    }
   }
 }
 
@@ -51,10 +51,6 @@
   color: inherit;
 }
 
-.content {
-  padding: var(--zn-spacing-x-small) 0;
-}
-
 :host([transparent]) > div {
   background-color: transparent;
 }
@@ -71,6 +67,8 @@
 
 :host #nav-container {
   gap: 0;
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+  margin: 0 3px;
 }
 
 .alt-overlay {
@@ -104,14 +102,21 @@
   }
 }
 
+:host([transparent]) {
+  .header {
+    margin: 0;
+
+    &__caption {
+
+    }
+  }
+}
 
 .header {
   display: flex;
   flex-direction: column;
-  border-bottom-width: 1px;
-  // border-top-width: 1px;
+  margin: 0;
   overflow: hidden;
-  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
 
   .content {
     display: flex;
@@ -130,7 +135,7 @@
     justify-content: center;
     flex-direction: column;
     gap: 1px;
-    min-height: 43px;
+    min-height: 24px;
     flex-shrink: 1;
     max-width: 100%;
   }
@@ -158,19 +163,15 @@
   }
 
   .breadcrumb {
-    flex-basis: 100%;
-    font-size: var(--zn-font-size-x-small);
-    font-weight: var(--zn-font-weight-semibold);
-    color: rgb(var(--zn-text));
-
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: var(--zn-spacing-2x-small);
+    font: inherit;
+    color: inherit;
 
     &::slotted(a) {
-      font-size: 0.875rem;
+      font: inherit;
       color: inherit;
-      font-weight: var(--zn-font-weight-normal);
       text-decoration: inherit;
     }
 
@@ -178,10 +179,11 @@
       color: rgb(var(--zn-primary));
     }
 
-    &::slotted(a:not(:last-of-type))::after {
+    &::slotted(a)::after {
       content: '>';
       margin-left: var(--zn-spacing-2x-small);
       color: rgb(var(--zn-text-muted));
+      font-weight: var(--zn-font-weight-normal);
     }
   }
 
@@ -211,17 +213,17 @@
 
   h1 {
     flex-grow: 1;
-    font-size: 18px;
 
     overflow: hidden;
     text-overflow: ellipsis;
 
     color: rgb(var(--zn-text-page-title));
     margin: 0;
+    font-size: var(--zn-font-size-medium);
     font-weight: var(--zn-font-weight-medium);
 
     @media screen and (min-width: var(--zn-container-lg)) {
-      font-size: var(--zn-font-size-x-large);
+      font-size: var(--zn-font-size-large);
     }
 
     &:empty {

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

@@ -108,6 +108,12 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   /** Enables search/filtering on select inputs. */
   @property({ type: Boolean }) search: boolean;
 
+  /**
+   * Allows entering values that aren't in the options list on select inputs ("free text"). Setting this implies
+   * `input-type="select"` (unless a data `provider` is used) and forwards the behavior to the inner `<zn-select>`.
+   */
+  @property({ type: Boolean, attribute: 'free-text' }) freeText: boolean;
+
   /** The input's help text. If you need to display HTML, use the `help-text` slot instead. **/
   @property({ attribute: 'help-text' }) helpText: string = '';
 
@@ -315,6 +321,11 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
       this.inputType = 'data-select';
     }
 
+    // Free text is a select capability — imply a select input when it's set (unless a data provider is used)
+    if (this.freeText && !this.selectProvider) {
+      this.inputType = 'select';
+    }
+
     let input: HTMLTemplateResult;
     switch (this.inputType) {
       case 'select':
@@ -457,7 +468,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                  multiple=${ifDefined(this.multiple)}
                  clearable=${ifDefined(this.isEditing ? this.clearable : undefined)}
                  ?search=${this.search}
-                 non-removable
+                 ?free-text=${this.freeText}
+                 ?non-removable=${!this.isEditing}
                  data-uri=${ifDefined(this.dataUri)}
                  context-data=${ifDefined(this.contextData)}
                  @zn-input="${this.handleInput}"

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

@@ -309,6 +309,56 @@ describe('<zn-inline-edit>', () => {
     expect(formData.get('tags')).to.equal('');
   });
 
+  // -- Free text --
+
+  it('should pass free-text to the inner select', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit input-type="select" free-text>
+        <zn-option value="a">A</zn-option>
+      </zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const select = el.shadowRoot?.querySelector('zn-select') as ZnSelect;
+    expect(select).to.exist;
+    expect(select.freeText).to.be.true;
+  });
+
+  it('should render a free-text select when free-text is set without an input-type', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit free-text></zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const select = el.shadowRoot?.querySelector('zn-select') as ZnSelect;
+    expect(select, 'free-text should imply a select input').to.exist;
+    expect(select.freeText).to.be.true;
+  });
+
+  it('should make inner select tags removable only while editing', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit free-text multiple value="a">
+        <zn-option value="a">A</zn-option>
+      </zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const select = el.shadowRoot?.querySelector('zn-select') as ZnSelect;
+    expect(select).to.exist;
+
+    // Display mode: tags are not removable (no X)
+    expect(select.nonRemovable).to.be.true;
+
+    // Enter edit mode
+    const editBtn = el.shadowRoot!.querySelector<HTMLElement>('.button--edit')!;
+    editBtn.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+    await el.updateComplete;
+    await select.updateComplete;
+
+    // Editing: tags become removable (X shows)
+    expect(select.nonRemovable).to.be.false;
+  });
+
   it('should flatten array to string when multiple is not set', async () => {
     const el = await fixture<ZnInlineEdit>(
       html`<zn-inline-edit value="hello"></zn-inline-edit>`

package/src/components/input/input.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import {expect, fixture, html} from '@open-wc/testing';
+import {clearFormStoreValues} from '../../utilities/form';
 import type ZnInput from './input.component';
 
 describe('<zn-input>', () => {
@@ -40,4 +41,80 @@ describe('<zn-input>', () => {
       expect(wrapperEscapes, 'wrapper should not see Escape on press 1').to.equal(0);
     });
   });
+
+  describe('persisted state', () => {
+    const formStoreKey = 'input-test-form-state';
+    const elementStoreKey = 'input-test-element-state';
+
+    beforeEach(() => {
+      clearFormStoreValues(formStoreKey);
+      clearFormStoreValues(elementStoreKey);
+    });
+
+    afterEach(() => {
+      clearFormStoreValues(formStoreKey);
+      clearFormStoreValues(elementStoreKey);
+    });
+
+    it('restores values from a form store-key after refresh', async () => {
+      const firstForm = await fixture<HTMLFormElement>(html`
+        <form store-key=${formStoreKey}>
+          <zn-input name="first_name"></zn-input>
+        </form>
+      `);
+      const firstInput = firstForm.querySelector('zn-input') as ZnInput;
+      await firstInput.updateComplete;
+
+      firstInput.value = 'Ada';
+      firstInput.dispatchEvent(new CustomEvent('zn-input', {bubbles: true, composed: true}));
+
+      const secondForm = await fixture<HTMLFormElement>(html`
+        <form store-key=${formStoreKey}>
+          <zn-input name="first_name"></zn-input>
+        </form>
+      `);
+      const secondInput = secondForm.querySelector('zn-input') as ZnInput;
+      await secondInput.updateComplete;
+
+      expect(secondInput.value).to.equal('Ada');
+    });
+
+    it('restores values from an element store-key without a form store-key', async () => {
+      const firstInput = await fixture<ZnInput>(html`<zn-input store-key=${elementStoreKey}></zn-input>`);
+      await firstInput.updateComplete;
+
+      firstInput.value = 'Lovelace';
+      firstInput.dispatchEvent(new CustomEvent('zn-input', {bubbles: true, composed: true}));
+
+      const secondInput = await fixture<ZnInput>(html`<zn-input store-key=${elementStoreKey}></zn-input>`);
+      await secondInput.updateComplete;
+
+      expect(secondInput.value).to.equal('Lovelace');
+    });
+
+    it('clears values for a form store-key', async () => {
+      const firstForm = await fixture<HTMLFormElement>(html`
+        <form store-key=${formStoreKey}>
+          <zn-input name="first_name"></zn-input>
+        </form>
+      `);
+      const firstInput = firstForm.querySelector('zn-input') as ZnInput;
+      await firstInput.updateComplete;
+
+      firstInput.value = 'Grace';
+      firstInput.dispatchEvent(new CustomEvent('zn-input', {bubbles: true, composed: true}));
+
+      clearFormStoreValues(firstForm);
+
+      const secondForm = await fixture<HTMLFormElement>(html`
+        <form store-key=${formStoreKey}>
+          <zn-input name="first_name"></zn-input>
+        </form>
+      `);
+      const secondInput = secondForm.querySelector('zn-input') as ZnInput;
+      await secondInput.updateComplete;
+
+      expect(secondInput.value).to.equal('');
+    });
+  });
 });