@kubex/zinc 1.0.11 → 1.0.13

package/src/components/progress-bar/progress-bar.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 './progress-bar.scss';

package/src/components/progress-tile/progress-tile.component.ts

@@ -1,9 +1,9 @@
-import {property} from 'lit/decorators.js';
+import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './progress-tile.scss';
-import {classMap} from "lit/directives/class-map.js";
 
 /**
  * @summary Short summary of the component's intended use.

package/src/components/reveal/index.ts

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

package/src/components/reveal/reveal.component.ts

@@ -0,0 +1,92 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './reveal.scss';
+import {classMap} from "lit/directives/class-map.js";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/reveal
+ * @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.
+ *
+ * @usage
+ * ```html
+ * <zn-reveal duration="3000"
+ *            initial="******@hotmail.com"
+ *            revealed="john.doe@hotmail.com" toggle>
+ * </zn-reveal>
+ * ```
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnReveal extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: Number}) duration: number = 2000;
+
+  @property() initial: string = '';
+
+  @property() revealed: string = '';
+
+  private _isRevealed: boolean = false;
+  private _isToggled: boolean = false;
+
+  protected handleToggleReveal() {
+    if (this.duration) {
+      this._isRevealed = true;
+      this._isToggled = true;
+
+      this.requestUpdate();
+
+      setTimeout(() => {
+        this._isRevealed = false;
+        this._isToggled = false;
+        this.requestUpdate();
+      }, this.duration);
+    } else {
+      this._isRevealed = !this._isRevealed;
+      this._isToggled = !this._isToggled;
+      this.requestUpdate();
+    }
+  }
+
+  protected handleMouseEnter() {
+    // handle hover only while hovered
+    this._isRevealed = true;
+    this.requestUpdate();
+  }
+
+  protected handleMouseLeave() {
+    if (this._isToggled) {
+      return;
+    }
+    this._isRevealed = false;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <div class=${classMap({
+        'reveal': true,
+        'reveal--revealed': this._isRevealed,
+        'reveal--toggled': this._isToggled,
+      })}
+           @click="${this.handleToggleReveal}"
+           @mouseenter="${this.handleMouseEnter}"
+           @mouseleave="${this.handleMouseLeave}">
+        ${this._isRevealed ? this.revealed : this.initial}
+      </div>
+    `;
+  }
+}

package/src/components/reveal/reveal.scss

@@ -0,0 +1,18 @@
+@use "../../wc";
+
+:host {
+  display: inline-block;
+  cursor: pointer;
+}
+
+
+.reveal {
+}
+
+.reveal--revealed{
+  // reveal is showing
+}
+
+.reveal--toggled {
+  // reveal has been toggled
+}

package/src/components/reveal/reveal.test.ts

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

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

@@ -1,6 +1,6 @@
 import {animateTo, stopAnimations} from '../../internal/animate.js';
 import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, nothing, type TemplateResult, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, nothing, type TemplateResult, unsafeCSS, PropertyValues} from 'lit';
 import {FormControlController} from "../../internal/form";
 import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
 import {HasSlotController} from "../../internal/slot";
@@ -10,11 +10,11 @@ import {scrollIntoView} from "../../internal/scroll";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {waitForEvent} from "../../internal/event";
 import {watch} from '../../internal/watch';
+import type {ZincFormControl} from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
 import ZnChip from "../chip";
 import ZnIcon from "../icon";
 import ZnPopup from "../popup";
-import type {ZincFormControl} from '../../internal/zinc-element';
 import type {ZnRemoveEvent} from "../../events/zn-remove";
 import type ZnOption from "../option";
 
@@ -127,7 +127,18 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   }
 
   /** The default value of the form control. Primarily used for resetting the form control. */
-  @property({attribute: 'value'}) defaultValue: string | string[] = '';
+  @property({
+    attribute: 'value',
+    converter: {
+      fromAttribute: (value) => {
+        if (!value || Array.isArray(value)) return value
+        return value.includes(' ') ? value.split(' ') : value;
+      },
+      toAttribute: (value) => {
+        return Array.isArray(value) ? value.join(' ') : value;
+      }
+    }
+  }) defaultValue: string | string[] = '';
 
   /** The select's size. */
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
@@ -213,14 +224,21 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
               remove-button:tag__remove-button,
               remove-button__base:tag__remove-button__base"
         ?pill=${this.pill}
-        size=${this.size}
+        size="x-small"
+        type="primary"
         removable
         @zn-remove=${(event: ZnRemoveEvent) => this.handleTagRemove(event, option)}>
         ${option.getTextLabel()}
+        <zn-icon slot="action" src="close" size="16"
+                 @click=${(e: any) => this.handleTagRemove(e as ZnRemoveEvent, option)}></zn-icon>
       </zn-chip>
     `;
   };
 
+  @property() distinct = "";
+
+  @property() conditional = "";
+
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -234,9 +252,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   connectedCallback() {
     super.connectedCallback();
 
-    setTimeout(() => {
-      this.handleDefaultSlotChange();
-    });
+    this.updateComplete.then(() => this.handleDefaultSlotChange());
 
     // Because this is a form control, it shouldn't be opened initially
     this.open = false;
@@ -298,10 +314,13 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   private handleDocumentKeyDown = (event: KeyboardEvent) => {
     const target = event.target as HTMLElement;
     const isClearButton = target.closest('.select__clear') !== null;
-    const isIconButton = target.closest('zn-icon-button') !== null;
+    const isIconButton = target.closest('zn-icon') !== null;
+
+    // and isn't keyboard_arrow_down icon
+    const isExpandIcon = target.closest('.select__expand-icon') !== null;
 
     // Ignore presses when the target is an icon button (e.g. the remove button in <zn-tag>)
-    if (isClearButton || isIconButton) {
+    if ((isClearButton || isIconButton) && !isExpandIcon) {
       return;
     }
 
@@ -439,10 +458,12 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
   private handleComboboxMouseDown(event: MouseEvent) {
     const path = event.composedPath();
-    const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'zn-icon-button');
+    const isIcon = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'zn-icon');
 
+    // not the keyboard_arrow_down icon
+    const isExpandIcon = path.some(el => el instanceof Element && el.classList.contains('select__expand-icon'));
     // Ignore disabled controls and clicks on tags (remove buttons)
-    if (this.disabled || isIconButton) {
+    if ((this.disabled || isIcon) && !isExpandIcon) {
       return;
     }
 
@@ -541,6 +562,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
   private handleTagRemove(event: ZnRemoveEvent, option: ZnOption) {
     event.stopPropagation();
+    event.stopImmediatePropagation();
 
     if (!this.disabled) {
       this.toggleOptionSelection(option, false);
@@ -670,6 +692,49 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this.formControlController.emitInvalidEvent(event);
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    if (this.distinct !== "") {
+      // if we are linked to another zn-data-select remove the selected values from that select from this select
+      const linkedSelect = document.querySelector(`zn-select[id="${this.distinct}"]`) as ZnSelect;
+      if (linkedSelect) {
+        linkedSelect.addEventListener('zn-change', () => {
+          const linkedValues = Array.isArray(linkedSelect.value) ? linkedSelect.value : [linkedSelect.value];
+          const options = this.getAllOptions().map(option => option as HTMLElement);
+          options.forEach(option => {
+            if (linkedValues.includes((option as ZnOption).value)) {
+              option.style.display = 'none';
+            } else {
+              option.style.display = '';
+            }
+          });
+        });
+
+        // trigger the event once to initialize
+        linkedSelect.dispatchEvent(new Event('zn-input'));
+      }
+
+    }
+
+    if (this.conditional !== "") {
+      const conditionalSelect = document.querySelector(`zn-select[id="${this.conditional}"]`) as ZnSelect;
+      console.log('conditionalSelect', conditionalSelect);
+      if (conditionalSelect) {
+        // disable if the other has any options selected
+        conditionalSelect.addEventListener('zn-change', () => {
+          let linkedValues = Array.isArray(conditionalSelect.value) ? conditionalSelect.value : [conditionalSelect.value];
+          linkedValues = linkedValues.filter(v => v !== '');
+          console.log('linkedValues', linkedValues);
+          this.disabled = linkedValues.length > 0;
+        });
+
+        // trigger the event once to initialize
+        conditionalSelect.dispatchEvent(new Event('zn-input'));
+      }
+    }
+  }
+
   @watch('disabled', {waitUntilFirstUpdate: true})
   handleDisabledChange() {
     // Close the listbox when the control is disabled

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

@@ -52,6 +52,7 @@ export default class ZnSp extends ZincElement {
   @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;
+  @property({attribute: 'wide-form-container', type: Boolean, reflect: true}) wideFormContainer: boolean = false;
 
   connectedCallback() {
     if (this.gap) {
@@ -81,6 +82,7 @@ export default class ZnSp extends ZincElement {
         'sp--flush-r': this.flushR,
         'width-container': this.widthContainer,
         'form-container': this.formContainer,
+        'wide-form-container': this.wideFormContainer,
       })}">
         <slot></slot>
       </div>`;

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

@@ -106,7 +106,8 @@ export default class ZnSplitPane extends ZincElement {
 
     this.mouseMoveHandler = function (e: any) {
       let offset = (this.vertical ? e.y : e.x);
-      if (e instanceof TouchEvent) {
+      //'touches' in e fixes Safari
+      if ('touches' in e && e instanceof TouchEvent) {
         offset = (this.vertical ? e.touches[0].clientY : e.touches[0].clientX);
       }
       this.setSize(offset - pageOffset);

package/src/components/toggle/toggle.component.ts

@@ -163,6 +163,34 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
         />`;
     }
 
+    const tooltipContent = this.checked ? this.onText : this.offText;
+    const showTooltip = !!tooltipContent;
+
+    const toggle = html`
+      <div class="switch__input-wrapper" part="base">
+        ${fallback}
+        <input
+          class="switch__input"
+          type="checkbox"
+          title=${this.title}
+          name=${this.name}
+          value=${ifDefined(this.value)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          role="switch"
+          aria-checked=${this.checked ? 'true' : 'false'}
+          aria-describedby="help-text"
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @keydown=${this.handleKeyDown}
+        />
+        <span part="control" class="switch__control"></span>
+      </div>`;
+
     return html`
       <div class="${classMap({
         'switch__wrapper': true,
@@ -174,29 +202,11 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
       })}">
         <label>
           ${this.label ? html`<p class="switch-label">${this.label}</p>` : ''}
-          <div class="switch__input-wrapper" part="base">
-            ${fallback}
-            <input
-              class="switch__input"
-              type="checkbox"
-              title=${this.title}
-              name=${this.name}
-              value=${ifDefined(this.value)}
-              .checked=${live(this.checked)}
-              .disabled=${this.disabled}
-              .required=${this.required}
-              role="switch"
-              aria-checked=${this.checked ? 'true' : 'false'}
-              aria-describedby="help-text"
-              @click=${this.handleClick}
-              @input=${this.handleInput}
-              @invalid=${this.handleInvalid}
-              @blur=${this.handleBlur}
-              @focus=${this.handleFocus}
-              @keydown=${this.handleKeyDown}
-            />
-            <span part="control" class="switch__control"></span>
-          </div>
+          ${!showTooltip ? html`
+            ${toggle}` : html`
+            <zn-tooltip content="${tooltipContent}">
+              ${toggle}
+            </zn-tooltip>`}
         </label>
       </div>`;
   }

package/src/components/tooltip/tooltip.component.ts

@@ -3,6 +3,7 @@ import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import {waitForEvent} from "../../internal/event";
 import {watch} from '../../internal/watch';
+import topLayerManager from '../../utilities/top-layer-manager';
 import ZincElement from '../../internal/zinc-element';
 import type Popup from "../popup";
 
@@ -82,13 +83,13 @@ export default class ZnTooltip extends ZincElement {
   }
 
   private handleBlur = () => {
-    if (this.hasTrigger('focus')) {
+    if (this.hasTrigger('focus') && !topLayerManager.isDropdownOpen()) {
       this.hide();
     }
   };
 
   private handleClick = () => {
-    if (this.hasTrigger('click')) {
+    if (this.hasTrigger('click') && !topLayerManager.isDropdownOpen()) {
       if (this.open) {
         this.hide()
       }
@@ -97,7 +98,7 @@ export default class ZnTooltip extends ZincElement {
   };
 
   private handleFocus = () => {
-    if (this.hasTrigger('focus')) {
+    if (this.hasTrigger('focus') && !topLayerManager.isDropdownOpen()) {
       this.show();
     }
   };
@@ -110,14 +111,14 @@ export default class ZnTooltip extends ZincElement {
   };
 
   private handleMouseOver() {
-    if (this.hasTrigger('hover')) {
+    if (this.hasTrigger('hover') && !topLayerManager.isDropdownOpen()) {
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.show(), 0);
     }
   }
 
   private handleMouseOut() {
-    if (this.hasTrigger('hover')) {
+    if (this.hasTrigger('hover') && !topLayerManager.isDropdownOpen()) {
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.hide(), 0);
     }
@@ -126,6 +127,8 @@ export default class ZnTooltip extends ZincElement {
   @watch('open', {waitUntilFirstUpdate: true})
   handleOpenChange() {
     if (this.open) {
+      topLayerManager.registerTooltip(this);
+
       if (this.disabled) {
         return;
       }
@@ -145,6 +148,8 @@ export default class ZnTooltip extends ZincElement {
       this.popup.reposition();
       this.emit('zn-after-show');
     } else {
+      topLayerManager.unregisterTooltip(this);
+
       this.emit('zn-hide');
       this.popup.active = false;
       this.body.hidden = true;

package/src/internal/form.ts

@@ -309,6 +309,11 @@ export class FormControlController implements ReactiveController {
           ? this.form?.getAttribute('data-loading-text') || 'Processing...'
           : content;
       }, 20);
+
+      setTimeout(() => {
+        submitButton.disabled = false;
+        submitButton.innerHTML = content;
+      }, 15000);
     }
 
     if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {

package/src/utilities/top-layer-manager.ts

@@ -0,0 +1,32 @@
+class TopLayerManager {
+  private openDropdowns: Set<HTMLElement> = new Set();
+  private openTooltips: Set<HTMLElement> = new Set();
+
+  registerDropdown(el: HTMLElement) {
+    this.openDropdowns.add(el);
+  }
+
+  unregisterDropdown(el: HTMLElement) {
+    this.openDropdowns.delete(el);
+  }
+
+  isDropdownOpen() {
+    return this.openDropdowns.size > 0;
+  }
+
+  registerTooltip(el: HTMLElement) {
+    this.openTooltips.add(el);
+  }
+
+  unregisterTooltip(el: HTMLElement) {
+    this.openTooltips.delete(el);
+  }
+
+  isTooltipOpen() {
+    return this.openTooltips.size > 0;
+  }
+}
+
+const topLayerManager = new TopLayerManager();
+
+export default topLayerManager;

package/src/wc.scss

@@ -25,16 +25,20 @@
   display: none !important;
 }
 
-.width-container {
+.width-container, .form-container, .wide-form-container {
   height: 100%;
   width: 100%;
-  max-width: var(--zn-container);
   margin: 0 auto;
 }
 
+.width-container {
+  max-width: var(--zn-container);
+}
+
 .form-container {
-  height: 100%;
-  width: 100%;
   max-width: var(--zn-container-ph);
-  margin: 0 auto;
+}
+
+.wide-form-container {
+  max-width: var(--zn-container-lg);
 }

package/src/zinc.ts

@@ -80,10 +80,12 @@ export {default as Style} from './components/style';
 export {default as ContentBlock} from './components/content-block';
 export {default as FilterWrapper} from './components/filter-wrapper';
 export {default as SettingsContainer} from './components/settings-container';
+export { default as FilterContainer } from './components/filter-container';
+export { default as Reveal } from './components/reveal';
 /* plop:component */
 
 // Base Component
-export * from './internal/zinc-element';
+export {default as ZincElement} from './internal/zinc-element';
 
 // Utilities
 export * from './utilities/on';