@aquera/nile-elements 1.6.1 → 1.6.3

package/src/nile-checkbox-group/nile-checkbox-group.ts

@@ -0,0 +1,351 @@
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { HasSlotController } from '../internal/slot';
+import { html } from 'lit';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-checkbox-group.css';
+import { Nile_Events } from '../internal/enum';
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import type NileCheckbox from '../nile-checkbox/nile-checkbox';
+
+/**
+ * @summary Checkbox groups manage multiple [checkboxes](/components/checkbox) so they function as a multi-select form control.
+ * Supports two association modes: slotted children or property-based remote association via `for`/`group`.
+ *
+ * @slot - The default slot where `<nile-checkbox>` elements are placed (slotted mode).
+ * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, use the `label` attribute.
+ *
+ * @event change - Emitted when the checkbox group's selected values change.
+ * @event input - Emitted when the checkbox group receives user input.
+ *
+ * @csspart form-control - The fieldset wrapper.
+ * @csspart form-control-label - The group label.
+ * @csspart form-control-input - The wrapper around the checkbox options.
+ * @csspart options-base - The container for the checkbox options.
+ */
+@customElement('nile-checkbox-group')
+export class NileCheckboxGroup extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private boundDocumentListener: ((event: Event) => void) | null = null;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  @state() defaultValue: string[] = [];
+
+  /** The checkbox group's label. Required for proper accessibility. */
+  @property() label = '';
+
+  /** The name of the checkbox group, submitted as a name/value pair with form data. */
+  @property() name = '';
+
+  /** The current selected values, as an array of checkbox value strings. */
+  @property({ type: Array }) value: string[] = [];
+
+  /**
+   * Group name for property-based association. When set, the group discovers
+   * checkboxes anywhere in the DOM that have a matching `group` attribute
+   * instead of relying on slotted children.
+   */
+  @property({ reflect: true, attribute: true}) for = '';
+
+  /**
+   * Associates the group with a `<form>` element by its `id`. The form must
+   * be in the same document or shadow root.
+   */
+  @property({ reflect: true }) form = '';
+
+  /** At least one checkbox must be checked before the form can submit. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /** Layout direction of the checkboxes. */
+  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';
+
+  /** Display checkboxes in an inline (horizontal) layout. Alias for orientation="horizontal". */
+  @property({ type: Boolean, reflect: true }) labelInline = false;
+
+  /** Disables all associated checkboxes. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ attribute: true, reflect: true }) helpText = '';
+
+  @property({ attribute: true, reflect: true }) errorMessage = '';
+
+  /** Maximum number of checkboxes that can be checked. Unchecked boxes are disabled when the limit is reached. */
+  @property({ type: Number, reflect: true }) max: number | undefined;
+
+  /** Minimum selections required for validation. */
+  @property({ type: Number, reflect: true }) min: number | undefined;
+
+  /** Shows a visible border around the fieldset wrapper. */
+  @property({ type: Boolean, reflect: true }) bordered = false;
+
+  /** Legend text displayed at the top of the fieldset when bordered is enabled. */
+  @property({ type: String, reflect: true }) legend = '';
+
+  private get isHorizontal(): boolean {
+    return this.orientation === 'horizontal' || this.labelInline;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = [...this.value];
+    this.setupDocumentListener();
+    this.emit(Nile_Events.NILE_INIT);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.teardownDocumentListener();
+    this.emit(Nile_Events.NILE_DESTROY);
+  }
+
+  private setupDocumentListener() {
+    if (this.for) {
+      this.boundDocumentListener = (event: Event) => {
+        const target = event.target as NileCheckbox;
+        if (
+          target.tagName?.toLowerCase() === 'nile-checkbox' &&
+          target.group === this.for
+        ) {
+          this.handleCheckboxChange(target);
+        }
+      };
+      document.addEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);
+    }
+  }
+
+  private teardownDocumentListener() {
+    if (this.boundDocumentListener) {
+      document.removeEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);
+      this.boundDocumentListener = null;
+    }
+  }
+
+  @watch('for')
+  handleForChange() {
+    this.teardownDocumentListener();
+    this.setupDocumentListener();
+    this.syncCheckboxStates();
+    this.enforceMaxDisabled();
+  }
+
+  private getAllCheckboxes(): NileCheckbox[] {
+    if (this.for) {
+      const root = this.getRootNode() as Document | ShadowRoot;
+      return [...root.querySelectorAll<NileCheckbox>(`nile-checkbox[group="${this.for}"]`)];
+    }
+    return [...this.querySelectorAll<NileCheckbox>('nile-checkbox')];
+  }
+
+  private handleCheckboxClick(event: MouseEvent) {
+    const target = (event.target as HTMLElement).closest<NileCheckbox>('nile-checkbox');
+    if (!target) return;
+    this.handleCheckboxChange(target);
+  }
+
+  private handleChildInput(event: Event) {
+    event.stopPropagation();
+  }
+
+  private handleCheckboxChange(target: NileCheckbox) {
+    if (target.disabled || this.disabled) return;
+
+    const checkboxes = this.getAllCheckboxes();
+    const checkedCount = checkboxes.filter(cb => cb.checked).length;
+
+    if (this.max !== undefined && checkedCount > this.max) {
+      target.checked = false;
+      return;
+    }
+
+    const newValue = checkboxes
+      .filter(cb => cb.checked)
+      .map(cb => String(cb.value));
+
+    const oldValue = this.value;
+    this.value = newValue;
+
+    this.enforceMaxDisabled();
+
+    if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value });
+    }
+  }
+
+  private enforceMaxDisabled() {
+    if (this.max === undefined) return;
+
+    const checkboxes = this.getAllCheckboxes();
+    const checkedCount = checkboxes.filter(cb => cb.checked).length;
+    const atLimit = checkedCount >= this.max;
+
+    checkboxes.forEach(cb => {
+      if (!cb.checked && !this.disabled) {
+        cb.disabled = atLimit;
+      }
+    });
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('max')) {
+      this.enforceMaxDisabled();
+    }
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = true;
+      });
+    } else {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = cb.hasAttribute('disabled');
+      });
+      this.enforceMaxDisabled();
+    }
+  }
+
+  private handleInitialDisabledState() {
+    if (this.disabled) {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = true;
+      });
+    } else {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = cb.hasAttribute('disabled') ? true : false;
+      });
+    }
+  }
+
+  private handleLabelClick() {
+    if (this.disabled) return;
+    const checkboxes = this.getAllCheckboxes();
+    const first = checkboxes[0];
+    if (first) {
+      first.focus();
+    }
+  }
+
+  private handleSlotChange() {
+    const checkboxes = this.getAllCheckboxes();
+
+    checkboxes.forEach(cb => {
+      cb.checked = this.value.includes(String(cb.value));
+    });
+
+    this.handleInitialDisabledState();
+    this.enforceMaxDisabled();
+  }
+
+  private syncCheckboxStates() {
+    const checkboxes = this.getAllCheckboxes();
+    checkboxes.forEach(cb => {
+      cb.checked = this.value.includes(String(cb.value));
+    });
+  }
+
+  @watch('value')
+  handleValueChange() {
+    if (this.hasUpdated) {
+      if (this.max !== undefined && this.value.length > this.max) {
+        this.value = this.value.slice(0, this.max);
+      }
+      this.syncCheckboxStates();
+      this.enforceMaxDisabled();
+    }
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
+
+    const defaultSlot = html`
+      <slot
+        @click=${this.handleCheckboxClick}
+        @input=${this.handleChildInput}
+        @slotchange=${this.handleSlotChange}
+        role="presentation"
+      ></slot>
+    `;
+
+    return html`
+      <fieldset
+        part="form-control"
+        class=${classMap({
+          'form-control': true,
+          'form-control--medium': true,
+          'form-control--checkbox-group': true,
+          'form-control--has-label': hasLabel,
+          'form-control--has-help-text': hasHelpText,
+          'form-control--bordered': this.bordered,
+        })}
+        role="group"
+        aria-labelledby="label"
+        aria-describedby="help-text"
+        aria-errormessage="error-message"
+      >
+        ${this.legend
+          ? html`<legend part="legend legend-label" class="form-control__legend">${this.legend}</legend>`
+          : ``}
+
+        <label
+          part="form-control-label"
+          id="label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
+        <div part="form-control-input" class="form-control-input" >
+          <div class="visually-hidden" part="validation-hidden">
+            <label class="checkbox-group__validation" part="validation-label" >
+              <input
+                type="text"
+                class="checkbox-group__validation-input"
+                part="validation-input"
+                ?required=${this.required}
+                tabindex="-1"
+                hidden
+              />
+            </label>
+          </div>
+
+          <div part="options-base" class="${this.isHorizontal ? `form-control--inline-checkbox` : ``}">
+            ${defaultSlot}
+          </div>
+        </div>
+
+        ${hasHelpText
+  ? html` <nile-form-help-text id="help-text">${this.helpText}</nile-form-help-text> `
+  : ``}
+
+${hasErrorMessage
+  ? html`
+      <nile-form-error-message id="error-message">${this.errorMessage}</nile-form-error-message>
+            `
+          : ``}
+      </fieldset>
+    `;
+  }
+}
+
+export default NileCheckboxGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-checkbox-group': NileCheckboxGroup;
+  }
+}

package/src/nile-floating-panel/nile-floating-panel.ts

@@ -151,6 +151,9 @@ export class NileFloatingPanel extends NileElement {
   /** Close the panel when Escape is pressed. */
   @property({ type: Boolean, reflect: true }) closeOnEscape = true;
 
+  /** Custom CSS class(es) added to the Tippy popper element, allowing per-instance styling from the host. */
+  @property({ type: String, reflect: true, attribute: true}) panelClass: string = '';
+
   // ─── Visibility manager props ───
 
   @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
@@ -240,6 +243,7 @@ export class NileFloatingPanel extends NileElement {
       'animation', 'duration', 'delay', 'interactive', 'interactiveBorder',
       'maxWidth', 'zIndex', 'followCursor', 'hideOnClick', 'inertia',
       'allowHTML', 'flip', 'preventOverlayClose', 'disabled', 'width', 'height',
+      'panelClass'
     ];
 
     if (rebuildProps.some(p => changed.has(p))) {
@@ -527,8 +531,13 @@ export class NileFloatingPanel extends NileElement {
       popperOptions: {
         modifiers: [{ name: 'flip', enabled: this.flip }],
       },
-      onMount: () => {
+      onMount: (instance) => {
         if (this.panelContainer) this.panelContainer.style.display = '';
+        if (this.panelClass) {
+          this.panelClass.split(/\s+/).filter(Boolean).forEach(cls => {
+            instance.popper.classList.add(cls);
+          });
+        }
       },
       onShow: (instance) => {
         if (this.panelContainer) this.panelContainer.style.display = '';

package/src/nile-icon/icons/svg/folder_delete.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzUgMi40NTcxNFYxMC43ODU3QzEuNzUgMTAuOTg2NSAxLjgyOTAyIDExLjE3OTEgMS45Njk2NyAxMS4zMjExQzIuMTEwMzIgMTEuNDYzMSAyLjMwMTA5IDExLjU0MjkgMi41IDExLjU0MjlIMy41VjEyLjNIMi41QzIuMTAyMTggMTIuMyAxLjcyMDY0IDEyLjE0MDUgMS40MzkzNCAxMS44NTY1QzEuMTU4MDQgMTEuNTcyNSAxIDExLjE4NzMgMSAxMC43ODU3VjEuN0g1LjMyNTY5TDYuODI1NjkgMy45NzE0M0gxM1YxMC43ODU3QzEzIDExLjE4NzMgMTIuODQyIDExLjU3MjUgMTIuNTYwNyAxMS44NTY1QzEyLjI3OTQgMTIuMTQwNSAxMS44OTc4IDEyLjMgMTEuNSAxMi4zSDEwLjVWMTEuNTQyOUgxMS41QzExLjY5ODkgMTEuNTQyOSAxMS44ODk3IDExLjQ2MzEgMTIuMDMwMyAxMS4zMjExQzEyLjE3MSAxMS4xNzkxIDEyLjI1IDEwLjk4NjUgMTIuMjUgMTAuNzg1N1Y0LjcyODU3SDYuNDI0MzFMNC45MjQzMSAyLjQ1NzE0SDEuNzVaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik05Ljc4MzIgNi4zMzY5MUw3LjYxOTE0IDguNUw5Ljc4MzIgMTAuNjYzMUw5LjE2MzA5IDExLjI4MzJMNyA5LjExOTE0TDQuODM2OTEgMTEuMjgzMkw0LjIxNjggMTAuNjYzMUw2LjM3OTg4IDguNUw0LjIxNjggNi4zMzY5MUw0LjgzNjkxIDUuNzE2NzlMNyA3Ljg3OTg4TDkuMTYzMDkgNS43MTY3OUw5Ljc4MzIgNi4zMzY5MVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/index.ts

@@ -173,6 +173,7 @@ export { default as flowmapundo } from './flowmap-undo';
 export { default as flowmapworkflow } from './flowmap-workflow';
 export { default as flowmap } from './flowmap';
 export { default as folder } from './folder';
+export { default as folder_delete } from './folder_delete';
 export { default as foreach } from './foreach';
 export { default as format_align_justify } from './format_align_justify';
 export { default as format_align_left } from './format_align_left';

package/src/nile-icon/icons/svg/layers-three-02.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIj48cGF0aCAgICBkPSJNMS4zMzU5NCA4LjAwMDM3ICAgICAgIEw3Ljc2NDA5IDExLjIxNDQgICAgICAgQzcuODUxNTUgMTEuMjU4MiA3Ljg5NTI3IDExLjI4IDcuOTQxMTQgMTEuMjg4NiAgICAgICAgIDcuOTgxNzYgMTEuMjk2MyA4LjAyMzQ1IDExLjI5NjMgOC4wNjQwNyAxMS4yODg2ICAgICAgICAgOC4xMDk5NCAxMS4yOCA4LjE1MzY2IDExLjI1ODIgOC4yNDExMiAxMS4yMTQ0ICAgICAgIEwxNC42NjkzIDguMDAwMzcgICAgICAgTTEuMzM1OTQgMTEuMzMzNyAgICAgICBMNy43NjQwOSAxNC41NDc4ICAgICAgIEM3Ljg1MTU1IDE0LjU5MTUgNy44OTUyNyAxNC42MTM0IDcuOTQxMTQgMTQuNjIyICAgICAgICAgNy45ODE3NiAxNC42Mjk2IDguMDIzNDUgMTQuNjI5NiA4LjA2NDA3IDE0LjYyMiAgICAgICAgIDguMTA5OTQgMTQuNjEzNCA4LjE1MzY2IDE0LjU5MTUgOC4yNDExMiAxNC41NDc4ICAgICAgIEwxNC42NjkzIDExLjMzMzcgICAgICAgTTEuMzM1OTQgNC42NjcwNCAgICAgICBMNy43NjQwOSAxLjQ1Mjk2ICAgICAgIEM3Ljg1MTU1IDEuNDA5MjMgNy44OTUyNyAxLjM4NzM3IDcuOTQxMTQgMS4zNzg3NiAgICAgICAgIDcuOTgxNzYgMS4zNzExNCA4LjAyMzQ1IDEuMzcxMTQgOC4wNjQwNyAxLjM3ODc2ICAgICAgICAgOC4xMDk5NCAxLjM4NzM3IDguMTUzNjYgMS40MDkyMyA4LjI0MTEyIDEuNDUyOTYgICAgICAgTDE0LjY2OTMgNC42NjcwNCAgICAgICBMOC4yNDExMiA3Ljg4MTExICAgICAgIEM4LjE1MzY2IDcuOTI0ODQgOC4xMDk5NCA3Ljk0NjcgOC4wNjQwNyA3Ljk1NTMxICAgICAgICAgOC4wMjM0NSA3Ljk2MjkzIDcuOTgxNzYgNy45NjI5MyA3Ljk0MTE0IDcuOTU1MzEgICAgICAgICA3Ljg5NTI3IDcuOTQ2NyA3Ljg1MTU1IDcuOTI0ODQgNy43NjQwOSA3Ljg4MTExICAgICAgIEwxLjMzNTk0IDQuNjY3MDQgICAgICAgWiIgICAgc3Ryb2tlPSIjMzQ0MDU0IiAgICBzdHJva2Utd2lkdGg9IjEuNiIgICAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgICBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNy4yMDEyOSAxLjEwNTM0TDEzIDQuMTUzNzFMNyA3LjcwMTA2TDEuNzM5MjMgNC41ODk4NUwxIDQuMTUzNzFMNi43OTg3MSAxLjEwNTM0TDcgMUw3LjIwMTI5IDEuMTA1MzRaTTIuOTE4ODQgNC4yMDE3Nkw3IDYuNjE1MzNMMTEuMDgxMiA0LjIwMTc2TDcgMi4wNTcwOUwyLjkxODg0IDQuMjAxNzZaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMi42NTM3IDcuMDA3NDhMNyAxMC4zNTA2TDEuMzQ3MiA3LjAwNzQ4TDEuNzg4NDYgNi4xODMyNUw3IDkuMjYzOTZMMTIuMjEyNCA2LjE4MzI1TDEyLjY1MzcgNy4wMDc0OFoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTEyLjY1MzcgOS42NTY4Nkw3IDEzTDEuMzQ3MiA5LjY1Njg2TDEuNzg4NDYgOC44MzI2M0w3IDExLjkxMzNMMTIuMjEyNCA4LjgzMjYzTDEyLjY1MzcgOS42NTY4NloiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-link/nile-link.ts

@@ -5,14 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
+import { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import { customElement, state, property } from 'lit/decorators.js';
 import {styles} from './nile-link.css';
 import { HasSlotController } from '../slot';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
-import NileElement from '../internal/nile-element';
+import NileElement, { setupA11yMetadata } from '../internal/nile-element';
 import { watch } from '../internal/watch';
+import { A11yProperty } from '../internal/accessibility/a11y.property.enum';
+import { Role } from '../internal/accessibility/role.enum';
+import { A11yCustomValue } from '../internal/accessibility/a11y.custom-value.enum';
+import { A11yRole } from '../internal/accessibility/a11y.role.enum';
+import { A11yState } from '../internal/accessibility/a11y.state.enum';
 
 /**
  * Nile icon component.
@@ -51,6 +56,20 @@ export class NileLink extends NileElement {
     this.handleHostClick = this.handleHostClick.bind(this);
     this.addEventListener('click', this.handleHostClick);
     this.emit('nile-init');
+
+    setupA11yMetadata(this, {
+      [Role.Role]: A11yRole.Link,
+      [A11yProperty.AriaLabel]: this.textContent?.trim() || A11yCustomValue.Link,
+    });
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('disabled')) {
+      setupA11yMetadata(this, {
+        [A11yState.AriaDisabled]: this.disabled,
+      });
+    }
   }
 
   disconnectedCallback() {

package/src/nile-otp-input/index.ts

@@ -0,0 +1 @@
+export { NileOtpInput } from './nile-otp-input';