@kubex/zinc 1.0.4 → 1.0.6

package/src/components/scroll-container/scroll-container.component.ts

@@ -1,5 +1,6 @@
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, unsafeCSS, PropertyValues} from 'lit';
 import ZincElement from '../../internal/zinc-element';
+import {property, query} from "lit/decorators.js";
 
 import styles from './scroll-container.scss';
 
@@ -23,19 +24,65 @@ import styles from './scroll-container.scss';
 export default class ZnScrollContainer extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  constructor() {
-    super();
+  @property({attribute: 'start-scrolled', type: Boolean, reflect: true}) startScrolled: boolean = false;
 
-    this.addEventListener('scroll-to-bottom', () => {
-      setTimeout(() => {
-        this.scrollTop = this.scrollHeight;
-      }, 100);
-    });
+  @query('.scroll-container')
+  private container: HTMLElement;
+
+  @query('.scroll-footer')
+  private footer: HTMLElement;
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    if (this.startScrolled && this.container) {
+      setTimeout(this.scrollEnd.bind(this), 10);
+    }
+  }
+
+  scrollEnd() {
+    this.container.scrollTop = this.container.scrollHeight;
+  }
+
+  private _footerResizeObserver?: ResizeObserver;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.startScrolled) {
+      const observer = new MutationObserver(() => {
+        setTimeout(this.scrollEnd.bind(this), 100);
+        if (this.footer) {
+          // Initialize height immediately
+          this.style.setProperty('--zn-scroll-footer-height', `${this.footer.clientHeight}px`);
+          // Attach ResizeObserver to watch for size changes
+          this._footerResizeObserver = new ResizeObserver(() => {
+            this.style.setProperty('--zn-scroll-footer-height', `${this.footer?.clientHeight ?? 0}px`);
+          });
+          this._footerResizeObserver.observe(this.footer);
+        }
+      });
+      observer.observe(this, {childList: true, subtree: true});
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._footerResizeObserver?.disconnect();
+    this._footerResizeObserver = undefined;
   }
 
   render() {
     return html`
-      <slot></slot>
+      <div class="container">
+        <div class="scroll-header">
+          <slot name="header"></slot>
+        </div>
+        <div class="scroll-container">
+          <slot></slot>
+        </div>
+        <div class="scroll-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
     `;
   }
 }

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

@@ -1,6 +1,27 @@
 @use "../../wc";
 
 :host {
+  display: contents;
+  --zn-scroll-footer-height: 0px;
+  --zn-scroll-header-height: 0px;
+}
+
+.container {
+  max-height: 100%;
+  max-width: 100%;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+:host([flex-end]) ::slotted(*) {
+  // margin-top: auto;
+}
+
+.scroll-container {
   @include wc.scrollbars;
   container-type: inline-size;
   display: flex;
@@ -10,8 +31,22 @@
   max-width: 100%;
   width: 100%;
   overflow-y: auto;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0 0 var(--zn-scroll-footer-height, 0px) 0;
 }
 
-:host([flex-end]) ::slotted(*) {
-  // margin-top: auto;
+.scroll-header {
+  display: contents;
+}
+
+.scroll-footer {
+  padding: 0;
+  margin: 0;
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
 }

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

@@ -623,6 +623,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     // Update the value and display label
     if (this.multiple) {
+      this.getAllOptions().filter(el => el.multiple !== true).forEach(el => el.multiple = true);
+
       this.value = this.selectedOptions.map(el => el.value);
 
       if (this.placeholder && this.value.length === 0) {
@@ -632,6 +634,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         this.displayLabel = this.localize.term('numOptionsSelected', this.selectedOptions.length);
       }
     } else {
+      this.getAllOptions().filter(el => el.multiple === true).forEach(el => el.multiple = false);
       const selectedOption = this.selectedOptions[0];
       this.value = selectedOption?.value ?? '';
       this.displayLabel = selectedOption?.getTextLabel() ?? '';

package/src/components/select/select.scss

@@ -38,7 +38,7 @@
   font-family: var(--zn-input-font-family);
   font-weight: var(--zn-input-font-weight);
   letter-spacing: var(--zn-input-letter-spacing);
-  box-shadow: var(--zn-shadow-small);
+  box-shadow: var(--zn-shadow-x-small);
   vertical-align: middle;
   overflow: hidden;
   cursor: pointer;

package/src/components/settings-container/index.ts

@@ -0,0 +1,12 @@
+import ZnSettingsContainer from './settings-container.component';
+
+export * from './settings-container.component';
+export default ZnSettingsContainer;
+
+ZnSettingsContainer.define('zn-settings-container');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-settings-container': ZnSettingsContainer;
+  }
+}

package/src/components/settings-container/settings-container.component.ts

@@ -0,0 +1,226 @@
+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 {type ZnChangeEvent} from "../../events/zn-change";
+import ZincElement from '../../internal/zinc-element';
+import type ZnCheckbox from "../checkbox";
+
+import styles from './settings-container.scss';
+import {deepQuerySelectorAll} from "../../utilities/query";
+
+interface SettingsContainerFilter {
+  attribute: string;
+  checked: boolean;
+  label: string;
+  itemSelector?: string;
+}
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/settings-container
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnSettingsContainer extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @state() filters: SettingsContainerFilter[] = [];
+
+  @property() position: 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' = 'bottom-start';
+
+  @property({attribute: 'store-key'}) storeKey: string;
+  @property({attribute: 'no-scroll'}) noScroll: boolean;
+
+  private _mutationObserver: MutationObserver | null = null;
+
+  private _updateFiltersScheduled = false;
+
+  private _store: Store;
+
+  private _hiddenElements: Set<Element> = new Set();
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this._store = new Store(window.sessionStorage, this.storeKey);
+
+    this.recomputeFiltersFromSlot();
+    this.updateFilters();
+
+    // Load saved filter states
+    if (this.storeKey) {
+      const savedFilters = this._store.get('filters');
+      if (savedFilters) {
+        const parsedFilters = JSON.parse(savedFilters) as Record<string, boolean>;
+        this.filters = this.filters.map(filter => ({
+          ...filter,
+          checked: Object.prototype.hasOwnProperty.call(parsedFilters, filter.attribute) ? parsedFilters[filter.attribute] : filter.checked
+        }));
+        this.updateFilters();
+      }
+    }
+
+    this._mutationObserver = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'hidden') {
+          continue;
+        }
+        this.scheduleUpdateFilters();
+        break;
+      }
+    });
+    this._mutationObserver.observe(this, {childList: true, subtree: true, attributes: true});
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._mutationObserver) {
+      this._mutationObserver.disconnect();
+      this._mutationObserver = null;
+    }
+  }
+
+  // Debounced scheduling to avoid excessive updates on rapid DOM mutations
+  private scheduleUpdateFilters() {
+    if (this._updateFiltersScheduled) return;
+    this._updateFiltersScheduled = true;
+    Promise.resolve().then(() => {
+      this._updateFiltersScheduled = false;
+      this.updateFilters();
+    });
+  }
+
+  private handleContentSlotChange = () => {
+    this.updateFilters();
+  };
+
+  private handleFiltersSlotChange = () => {
+    this.recomputeFiltersFromSlot();
+    this.updateFilters();
+  };
+
+  private recomputeFiltersFromSlot() {
+    const existingChecked = new Map(this.filters.map(f => [f.attribute, f.checked]));
+    const slotFilters = this.querySelectorAll('[slot="filter"]');
+    const nextFilters: SettingsContainerFilter[] = [];
+    slotFilters.forEach(filter => {
+      const attribute = filter.getAttribute('attribute');
+      if (!attribute) return;
+      const defaultChecked = filter.getAttribute('default') === 'true';
+      const checked = existingChecked.has(attribute) ? !!existingChecked.get(attribute) : defaultChecked;
+      const label = filter.textContent || 'Unnamed Filter';
+      const itemSelector = filter.getAttribute('item-selector') || '*';
+      nextFilters.push({attribute, checked, label, itemSelector});
+    });
+    this.filters = nextFilters;
+  }
+
+  updateFilters() {
+    // reset all items
+    this._hiddenElements.forEach(el => el.removeAttribute('hidden'));
+
+    // apply filters
+    this.filters.forEach(filter => {
+      let items;
+      const attrAppend = filter.attribute === "*" ? `` : `[${filter.attribute}]`;
+      if (filter.itemSelector && filter.itemSelector.startsWith('>')) {
+        items = deepQuerySelectorAll(filter.itemSelector.substring(1) + attrAppend, this, "");
+      } else {
+        items = this.querySelectorAll(filter.itemSelector + attrAppend);
+      }
+      items.forEach(item => {
+        if (filter.checked) {
+          item.removeAttribute('hidden');
+        } else {
+          item.setAttribute('hidden', 'true');
+          this._hiddenElements.add(item);
+        }
+      });
+    });
+  }
+
+  updateFilter(e: ZnChangeEvent) {
+    const attribute = (e.target as ZnCheckbox).getAttribute('data-attribute');
+    const checked = (e.target as ZnCheckbox).isChecked
+
+    this.filters = this.filters.map(filter => {
+      if (filter.attribute === attribute) {
+        return {...filter, checked};
+      }
+      return filter;
+    });
+
+    // Save filter states
+    if (this.storeKey) {
+      const filterStates = this.filters.reduce((acc: Record<string, boolean>, filter) => {
+        acc[filter.attribute] = filter.checked;
+        return acc;
+      }, {} satisfies Record<string, boolean>);
+      this._store.set('filters', JSON.stringify(filterStates));
+    }
+
+    this.updateFilters();
+  }
+
+  render() {
+    let placement = 'top-start';
+
+    switch (this.position) {
+      case 'top-end':
+        placement = 'bottom-end';
+        break;
+      case 'top-start':
+        placement = 'bottom-start';
+        break;
+      case 'bottom-end':
+        placement = 'top-end';
+        break;
+      case 'bottom-start':
+        placement = 'top-start';
+        break;
+    }
+
+    return html`
+      <div class="${classMap({
+        'container': true,
+        'container--scroll': !this.noScroll,
+      })}">
+        <div class="scroll-content">
+          <slot @slotchange="${this.handleContentSlotChange}"></slot>
+        </div>
+        <zn-dropdown placement="${placement}" class="${classMap({
+          'setting-container__dropdown': true,
+          'setting-container__dropdown--top-end': this.position === 'top-end',
+          'setting-container__dropdown--top-start': this.position === 'top-start',
+          'setting-container__dropdown--bottom-end': this.position === 'bottom-end',
+          'setting-container__dropdown--bottom-start': this.position === 'bottom-start',
+        })}">
+          <zn-icon class="setting-container__toggle-button" slot="trigger" size="24" src="settings" round></zn-icon>
+          <div class="settings-container__dropdown-content">
+            <slot name="filter" style="display: none;" @slotchange="${this.handleFiltersSlotChange}"></slot>
+            ${this.filters.map(filter => html`
+              <zn-checkbox class="settings-container__dropdown-item"
+                           data-attribute="${filter.attribute}"
+                           ?checked="${filter.checked}"
+                           @zn-change="${this.updateFilter}">
+                ${filter.label}
+              </zn-checkbox>
+            `)}
+          </div>
+        </zn-dropdown>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,99 @@
+@use "../../wc";
+
+:host {
+  display: contents;
+}
+
+.container {
+  padding-bottom: 30px;
+}
+
+.container--scroll {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.container--scroll .scroll-content {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.setting-container__dropdown {
+  z-index: 10;
+  position: absolute;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  padding: 4px;
+  background: rgba(var(--zn-panel, 0.8));
+  box-shadow: var(--zn-shadow-small);
+  transition: bottom 0.2s ease;
+  opacity: 0.7;
+  transition-duration: 0.3s;
+  transition-property: opacity;
+
+  &:hover {
+    background: rgba(var(--zn-panel, 1));
+  }
+
+  &--top-end {
+    top: var(--zn-spacing-medium);
+    right: var(--zn-spacing-medium);
+    bottom: auto;
+  }
+
+  &--top-start {
+    top: var(--zn-spacing-medium);
+    right: auto;
+    left: var(--zn-spacing-medium);
+    bottom: auto;
+  }
+
+  &--bottom-end {
+    bottom: calc(var(--zn-spacing-medium) + var(--zn-scroll-footer-height, 0px));
+    right: var(--zn-spacing-medium);
+    top: auto;
+  }
+
+  &--bottom-start {
+    bottom: calc(var(--zn-spacing-medium) + var(--zn-scroll-footer-height, 0px));
+    left: var(--zn-spacing-medium);
+    top: auto;
+  }
+}
+
+.setting-container__dropdown[open], .setting-container__dropdown:hover {
+  opacity: 1;
+}
+
+.setting-container__dropdown[open] .setting-container__toggle-button::part(icon), .setting-container__toggle-button:hover::part(icon) {
+  color: rgb(var(--zn-primary));
+  cursor: pointer;
+  transition-duration: 0.9s;
+  transition-property: rotate, color;
+  rotate: 380deg;
+  transition-timing-function: ease-in-out;
+}
+
+zn-button {
+  border-radius: var(--zn-border-radius-medium);
+}
+
+.settings-container__dropdown-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-large);
+  background-color: rgb(var(--zn-panel));
+  padding: var(--zn-spacing-large);
+  box-shadow: var(--zn-shadow-small);
+  border-radius: var(--zn-border-radius-medium);
+  max-width: var(--zn-size-mpanel);
+  width: fit-content;
+  z-index: 20;
+  border: 1px solid rgb(var(--zn-border-color));
+  margin-bottom: 10px;
+}

package/src/components/settings-container/settings-container.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-settings-container>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-settings-container></zn-settings-container> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/skeleton/skeleton.scss

@@ -9,19 +9,20 @@
   height: var(--skeleton-height);
   width: var(--skeleton-width);
   border-radius: var(--skeleton-border-radius);
+  background-color: lightgrey;
 
   @media (prefers-reduced-motion: reduce) {
     background-repeat: no-repeat;
-    background-color: rgba(lightgrey, 0.8);
+    background-color: lightgrey;
   }
 
   @media (prefers-reduced-motion: no-preference) {
     background-repeat: no-repeat;
     background-image: linear-gradient(
         90deg,
-        rgba(lightgrey, 0) 0%,
-        rgba(lightgrey, 0.8) 50%,
-        rgba(lightgrey, 0) 100%
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.8) 50%,
+        rgba(255, 255, 255, 0) 100%
     );
     background-size: 200% 100%;
     background-position: -150% 0;

package/src/components/sp/sp.component.ts

@@ -51,6 +51,7 @@ export default class ZnSp extends ZincElement {
   @property({attribute: 'flush-l', type: Boolean, reflect: true}) flushL: boolean = false;
   @property({attribute: 'flush-r', type: Boolean, reflect: true}) flushR: boolean = false;
   @property({attribute: 'width-container', type: Boolean, reflect: true}) widthContainer: boolean = false;
+  @property({attribute: 'form-container', type: Boolean, reflect: true}) formContainer: boolean = false;
 
   connectedCallback() {
     if (this.gap) {
@@ -79,6 +80,7 @@ export default class ZnSp extends ZincElement {
         'sp--flush-l': this.flushL,
         'sp--flush-r': this.flushR,
         'width-container': this.widthContainer,
+        'form-container': this.formContainer,
       })}">
         <slot></slot>
       </div>`;

package/src/components/sp/sp.scss

@@ -10,12 +10,14 @@
 }
 
 .sp {
+  position: relative;
   display: flex;
   flex-direction: column;
   flex-grow: 0;
   padding: var(--zn-sp-padding);
   gap: var(--zn-sp-gap);
   width: 100%;
+  height: 100%;
   //max-width: var(--zn-container-hd); //don't worry about max width just yet
   margin: 0 auto;
 

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

@@ -3,8 +3,8 @@ import {defaultValue} from "../../internal/default-value";
 import {FormControlController, validValidityState} from "../../internal/form";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query} from 'lit/decorators.js';
-import type {ZincFormControl} from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
+import type {ZincFormControl} from '../../internal/zinc-element';
 import type {ZnMenuSelectEvent} from "../../events/zn-menu-select";
 import type ZnButton from "../button";
 import type ZnDropdown from "../dropdown";
@@ -51,14 +51,12 @@ export default class ZnSplitButton extends ZincElement implements ZincFormContro
 
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener('click', this.handleClick)
     this.addEventListener('zn-menu-select', this.handleMenuItemClick);
     this.defaultValue = this.value;
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener('click', this.handleClick);
     this.removeEventListener('zn-menu-select', this.handleMenuItemClick);
   }
 
@@ -73,10 +71,6 @@ export default class ZnSplitButton extends ZincElement implements ZincFormContro
     }
   }
 
-  public handleClick(e: MouseEvent) {
-    e.stopPropagation();
-  }
-
   public handleTriggerClick() {
     this.value = this.defaultValue;
 
@@ -87,17 +81,8 @@ export default class ZnSplitButton extends ZincElement implements ZincFormContro
 
   render() {
     return html`
-      <zn-dropdown placement="bottom-start">
-        <div slot="trigger">
-          <zn-button-group>
-            <zn-button id="trigger-btn"
-                       href=${ifDefined(this.href)}
-                       @click=${this.handleTriggerClick}>
-              ${this.caption}
-            </zn-button>
-            <zn-button icon="keyboard_arrow_down"></zn-button>
-          </zn-button-group>
-        </div>
+      <zn-dropdown placement="bottom-end">
+        ${this.renderTriggerSlot()}
         <div>
           <slot name="menu"></slot>
         </div>
@@ -105,6 +90,27 @@ export default class ZnSplitButton extends ZincElement implements ZincFormContro
     `;
   }
 
+  private renderTriggerSlot() {
+    const hasTriggerSlot = !!this.querySelector('[slot="trigger"]');
+    if (hasTriggerSlot) {
+      return html`
+        <slot name="trigger" slot="trigger"></slot>`;
+    }
+
+    return html`
+      <div slot="trigger">
+        <zn-button-group>
+          <zn-button id="trigger-btn"
+                     href=${ifDefined(this.href)}
+                     @click=${this.handleTriggerClick}>
+            ${this.caption}
+          </zn-button>
+          <zn-button icon="keyboard_arrow_down"></zn-button>
+        </zn-button-group>
+      </div>
+    `;
+  }
+
   checkValidity(): boolean {
     if (this._isButton() && this.button) {
       return this.button.checkValidity();

package/src/components/split-pane/split-pane.component.ts

@@ -1,10 +1,10 @@
-import {eventOptions, property} from 'lit/decorators.js';
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {eventOptions, property} from 'lit/decorators.js';
+import {on} from "../../utilities/on";
+import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './split-pane.scss';
-import {Store} from "../../internal/storage";
-import {on} from "../../utilities/on";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -64,7 +64,7 @@ export default class ZnSplitPane extends ZincElement {
     on(this, 'click', '[split-pane-focus]', (e: Event & { selectedTarget: EventTarget }) => {
       e.preventDefault();
       e.stopPropagation();
-      this._setFocusPane(parseInt((e.selectedTarget as HTMLElement).getAttribute('split-pane-focus') as string));
+      this._setFocusPane(parseInt((e.selectedTarget as HTMLElement).getAttribute('split-pane-focus')!));
     });
   }
 
@@ -160,7 +160,7 @@ export default class ZnSplitPane extends ZincElement {
   _setFocusPane(idx: number) {
     this._focusPane = idx;
     this.querySelectorAll('ul#split-nav li').forEach((el) => {
-      el.classList.toggle('active', parseInt(el.getAttribute('idx') as string) == idx);
+      el.classList.toggle('active', parseInt(el.getAttribute('idx')!) == idx);
     });
   }