@kubex/zinc 1.0.17 → 1.0.19

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

@@ -1,22 +1,23 @@
-import { animateTo, stopAnimations } from '../../internal/animate.js';
-import { classMap } from "lit/directives/class-map.js";
-import { type CSSResultGroup, html, nothing, PropertyValues, type TemplateResult, unsafeCSS } from 'lit';
+import {animateTo, stopAnimations} from '../../internal/animate.js';
+import {classMap} from "lit/directives/class-map.js";
 import {deepQuerySelectorAll} from "../../utilities/query";
-import { FormControlController } from "../../internal/form";
-import { getAnimation, setDefaultAnimation } from "../../utilities/animation-registry";
-import { HasSlotController } from "../../internal/slot";
-import { LocalizeController } from "../../utilities/localize";
-import { property, query, state } from 'lit/decorators.js';
-import { scrollIntoView } from "../../internal/scroll";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { waitForEvent } from "../../internal/event";
-import { watch } from '../../internal/watch';
+import {FormControlController} from "../../internal/form";
+import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
+import {HasSlotController} from "../../internal/slot";
+import {html, nothing, unsafeCSS} from 'lit';
+import {LocalizeController} from "../../utilities/localize";
+import {property, query, state} from 'lit/decorators.js';
+import {scrollIntoView} from "../../internal/scroll";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import {waitForEvent} from "../../internal/event";
+import {watch} from '../../internal/watch';
 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 {CSSResultGroup, PropertyValues, TemplateResult} from 'lit';
+import type {ZincFormControl} from '../../internal/zinc-element';
+import type {ZnRemoveEvent} from "../../events/zn-remove";
 import type ZnOption from "../option";
 
 import styles from './select.scss';
@@ -90,12 +91,14 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   @query('.select__display-input') displayInput: HTMLInputElement;
   @query('.select__value-input') valueInput: HTMLInputElement;
   @query('.select__listbox') listbox: HTMLSlotElement;
+  @query('slot[name="prefix"]') prefixSlot: HTMLSlotElement;
 
   @state() private hasFocus = false;
   @state() displayLabel = '';
   @state() currentOption: ZnOption;
   @state() selectedOptions: ZnOption[] = [];
   @state() private valueHasChanged: boolean = false;
+  @state() private inputPrefix: boolean = false;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -142,73 +145,75 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   }) defaultValue: string | string[] = '';
 
   /** The select's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Placeholder text to show as a hint when the select is empty. */
   @property() placeholder = '';
 
   /** Allows more than one option to be selected. */
-  @property({ type: Boolean, reflect: true }) multiple = false;
+  @property({type: Boolean, reflect: true}) multiple = false;
 
   /** Max number of options that can be selected when `multiple` is true. Set to 0 to allow unlimited selections. */
-  @property({ attribute: 'max-options', type: Number }) maxOptions = 0;
+  @property({attribute: 'max-options', type: Number}) maxOptions = 0;
 
   /**
    * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
    * indicate the number of additional items that are selected. Set to 0 to remove the limit.
    */
-  @property({ attribute: 'max-options-visible', type: Number }) maxOptionsVisible = 3;
+  @property({attribute: 'max-options-visible', type: Number}) maxOptionsVisible = 3;
 
   /** Disables the select control. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({type: Boolean, reflect: true}) disabled = false;
 
   /** Adds a clear button when the select is not empty. */
-  @property({ type: Boolean }) clearable = false;
+  @property({type: Boolean}) clearable = false;
 
   /**
    * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
    * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
    */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({type: Boolean, reflect: true}) open = false;
 
   /**
    * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
    * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
    */
-  @property({ type: Boolean }) hoist = false;
+  @property({type: Boolean}) hoist = false;
 
   /** Draws a pill-style select with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
+  @property({type: Boolean, reflect: true}) pill = false;
 
   /** The select's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
   /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead. */
-  @property({ attribute: 'label-tooltip' }) labelTooltip = '';
+  @property({attribute: 'label-tooltip'}) labelTooltip = '';
 
   /** Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead. */
-  @property({ attribute: 'context-note' }) contextNote = '';
+  @property({attribute: 'context-note'}) contextNote = '';
 
   /**
    * The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox
    * inside the viewport.
    */
-  @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';
+  @property({reflect: true}) placement: 'top' | 'bottom' = 'bottom';
 
   /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({attribute: 'help-text'}) helpText = '';
 
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
    * the same document or shadow root for this to work.
    */
-  @property({ reflect: true }) form: string;
+  @property({reflect: true}) form: string;
 
   /** The select's required attribute. */
-  @property({ type: Boolean, reflect: true }) required = false;
+  @property({type: Boolean, reflect: true}) required = false;
 
-  @property({ attribute: 'cache-key' }) cacheKey: string = "";
+  @property({attribute: 'cache-key'}) cacheKey: string = "";
+
+  @property({type: Boolean, attribute: 'trigger-submit'}) triggerSubmit = false;
 
   /**
    * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
@@ -266,6 +271,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
   }
 
+  private updateHasInputPrefix() {
+    const assigned = this.prefixSlot?.assignedElements({flatten: true}) || [];
+    this.inputPrefix = assigned.length > 0;
+  }
+
   private addOpenListeners() {
     const root = this.getRootNode();
     root.addEventListener('focusin', this.handleDocumentFocusIn);
@@ -278,7 +288,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.closeWatcher.onclose = () => {
         if (this.open) {
           this.hide();
-          this.displayInput.focus({ preventScroll: true });
+          this.displayInput.focus({preventScroll: true});
         }
       };
     }
@@ -330,7 +340,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       event.preventDefault();
       event.stopPropagation();
       this.hide();
-      this.displayInput.focus({ preventScroll: true });
+      this.displayInput.focus({preventScroll: true});
     }
 
     // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the
@@ -362,7 +372,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
         if (!this.multiple) {
           this.hide();
-          this.displayInput.focus({ preventScroll: true });
+          this.displayInput.focus({preventScroll: true});
         }
       }
 
@@ -463,13 +473,15 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     // not the keyboard_arrow_down icon
     const isExpandIcon = path.some(el => el instanceof Element && el.classList.contains('select__expand-icon'));
+    // if click is inside the prefix area (e.g. checkbox), don't toggle the select
+    const inPrefix = path.some(el => el instanceof Element && el.classList.contains('select__prefix'));
     // Ignore disabled controls and clicks on tags (remove buttons)
-    if ((this.disabled || isIcon) && !isExpandIcon) {
+    if (((this.disabled || isIcon) && !isExpandIcon) || inPrefix) {
       return;
     }
 
     event.preventDefault();
-    this.displayInput.focus({ preventScroll: true });
+    this.displayInput.focus({preventScroll: true});
     this.open = !this.open;
   }
 
@@ -478,8 +490,14 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       return;
     }
 
-    event.stopPropagation();
-    this.handleDocumentKeyDown(event);
+    // If keydown originated from within the prefix (e.g. checkbox)
+    const path = event.composedPath();
+    const inPrefix = path.some(el => el instanceof Element && (el as Element).classList?.contains('select__prefix'));
+
+    if (!inPrefix) {
+      event.stopPropagation();
+      this.handleDocumentKeyDown(event);
+    }
   }
 
   private handleClearClick(event: MouseEvent) {
@@ -487,7 +505,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     if (this.value !== '') {
       this.setSelectedOptions([]);
-      this.displayInput.focus({ preventScroll: true });
+      this.displayInput.focus({preventScroll: true});
 
       // Emit after update
       this.updateComplete.then(() => {
@@ -526,7 +544,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       }
 
       // Set focus after updating so the value is announced by screen readers
-      this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
+      this.updateComplete.then(() => this.displayInput.focus({preventScroll: true}));
 
       if (this.value !== oldValue) {
         // Emit after updating
@@ -538,7 +556,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
       if (!this.multiple) {
         this.hide();
-        this.displayInput.focus({ preventScroll: true });
+        this.displayInput.focus({preventScroll: true});
+      }
+
+      if (this.triggerSubmit) {
+        this.formControlController.submit();
       }
     }
   }
@@ -745,9 +767,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         conditionalSelect.dispatchEvent(new Event('zn-input'));
       });
     }
+
+    this.updateHasInputPrefix();
   }
 
-  @watch('disabled', { waitUntilFirstUpdate: true })
+  @watch('disabled', {waitUntilFirstUpdate: true})
   handleDisabledChange() {
     // Close the listbox when the control is disabled
     if (this.disabled) {
@@ -768,7 +792,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
   }
 
-  @watch(['defaultValue', 'value'], { waitUntilFirstUpdate: true })
+  @watch(['defaultValue', 'value'], {waitUntilFirstUpdate: true})
   handleValueChange() {
     if (!this.valueHasChanged) {
       const cachedValueHasChanged = this.valueHasChanged;
@@ -784,7 +808,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
   }
 
-  @watch('open', { waitUntilFirstUpdate: true })
+  @watch('open', {waitUntilFirstUpdate: true})
   async handleOpenChange() {
     if (this.open && !this.disabled) {
       // Reset the current option
@@ -803,7 +827,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         this.setCurrentOption(this.currentOption);
       });
 
-      const { keyframes, options } = getAnimation(this, 'select.show', { dir: this.localize.dir() });
+      const {keyframes, options} = getAnimation(this, 'select.show', {dir: this.localize.dir()});
       await animateTo(this.popup.popup, keyframes, options);
 
       // Make sure the current option is scrolled into view (required for Safari)
@@ -818,7 +842,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.removeOpenListeners();
 
       await stopAnimations(this);
-      const { keyframes, options } = getAnimation(this, 'select.hide', { dir: this.localize.dir() });
+      const {keyframes, options} = getAnimation(this, 'select.hide', {dir: this.localize.dir()});
       await animateTo(this.popup.popup, keyframes, options);
       this.listbox.hidden = true;
       this.popup.active = false;
@@ -942,7 +966,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
               'select--bottom': this.placement === 'bottom',
               'select--small': this.size === 'small',
               'select--medium': this.size === 'medium',
-              'select--large': this.size === 'large'
+              'select--large': this.size === 'large',
+              'select--has-input-prefix': this.inputPrefix
             })}
             placement=${this.placement}
             strategy=${this.hoist ? 'fixed' : 'absolute'}
@@ -957,7 +982,10 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
               slot="anchor"
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}>
-              <slot part="prefix" name="prefix" class="select__prefix"></slot>
+              <slot part="prefix"
+                    name="prefix"
+                    class="select__prefix"
+                    @slotchange=${() => this.updateHasInputPrefix()}></slot>
 
               <input
                 part="display-input"
@@ -1049,16 +1077,16 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
 setDefaultAnimation('select.show', {
   keyframes: [
-    { opacity: 0, scale: 0.9 },
-    { opacity: 1, scale: 1 }
+    {opacity: 0, scale: 0.9},
+    {opacity: 1, scale: 1}
   ],
-  options: { duration: 100, easing: 'ease' }
+  options: {duration: 100, easing: 'ease'}
 });
 
 setDefaultAnimation('select.hide', {
   keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.9 }
+    {opacity: 1, scale: 1},
+    {opacity: 0, scale: 0.9}
   ],
-  options: { duration: 100, easing: 'ease' }
+  options: {duration: 100, easing: 'ease'}
 });

package/src/components/select/select.scss

@@ -48,6 +48,14 @@
   var(--zn-transition-fast) background-color;
 }
 
+/* Prefix area: allow a leading control (e.g., checkbox) full-height */
+.select__prefix {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  height: 100%;
+}
+
 .select__display-input {
   position: relative;
   width: 100%;
@@ -175,6 +183,10 @@
   padding-inline: var(--zn-input-spacing-medium);
 }
 
+.select--has-input-prefix.select--medium .select__combobox {
+  padding-inline-start: 0;
+}
+
 .select--medium .select__clear {
   margin-inline-start: var(--zn-input-spacing-medium);
 }
@@ -200,6 +212,10 @@
   padding-inline: var(--zn-input-spacing-large);
 }
 
+.select--has-input-prefix.select--large .select__combobox {
+  padding-inline-start: 0;
+}
+
 .select--large .select__clear {
   margin-inline-start: var(--zn-input-spacing-large);
 }
@@ -241,6 +257,11 @@
   color: var(--zn-input-icon-color);
 }
 
+/* When a checkbox is used in the prefix, remove left padding so the prefix joins flush */
+.select--has-input-prefix.select--standard .select__combobox {
+  padding-inline-start: 0;
+}
+
 /* Clear button */
 .select__clear {
   display: inline-flex;

package/src/components/style/style.component.ts

@@ -20,7 +20,7 @@ export default class ZnStyle extends ZincElement {
   @property({type: Boolean}) primary = false;
   @property({type: Boolean}) accent = false;
   @property({type: Boolean}) center = false;
-  @property({type: String}) display = 'contents';
+  @property({type: String}) display = null;
   @property() font = '';
   @property() width = '';
   @property() height = '';

package/src/zinc.ts

@@ -82,6 +82,7 @@ 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';
+export { default as AudioSelect } from './components/audio-select';
 /* plop:component */
 
 // Base Component