@expressivecss/expressive 0.14.1 → 0.16.0

package/dist/js/chunks/chunk-WU7XJ4RR.mjs

@@ -0,0 +1,450 @@
+import {
+  formAssociated,
+  unwrapControl,
+  wrapInControl
+} from "./chunk-INLZWHLY.mjs";
+import {
+  Autocomplete
+} from "./chunk-VGY4M57S.mjs";
+import {
+  Component
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  restoreAttribute
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/chips.ts
+var CONTROL = "expressive-chips-control";
+var pastedValues = (e) => (e.clipboardData?.getData("text") ?? "").split(/[,\t\n]/).map((value) => value.trim()).filter(Boolean);
+var _defaults = {
+  data: [],
+  placeholder: "",
+  secondaryPlaceholder: "",
+  closeIconClass: "material-symbols",
+  autocompleteOptions: {},
+  autocompleteOnly: false,
+  limit: Infinity,
+  allowUserInput: false,
+  i18n: { remove: "Remove", required: "Add at least one item." },
+  onChipAdd: null,
+  onChipSelect: null,
+  onChipDelete: null
+};
+var _Chips = class _Chips extends Component {
+  constructor(el, options) {
+    super(el, options);
+    /** The form name the text input had, which the chips submit instead. */
+    this._name = "";
+    /** The chips the field started with, which a form reset puts back. */
+    this._initialData = [];
+    /** The input's own aria-required, or null, put back on destroy. */
+    this._ariaRequired = null;
+    /** The form control wrapping a named input, which the form reads instead of it. */
+    this._control = null;
+    /** The named text input, whose form, disabled state and required the chips take over. */
+    this._source = null;
+    this._required = false;
+    /** Pasted text that lists several values, split by commas, tabs or lines, adds a chip for each. */
+    this._handleInputPaste = (e) => {
+      const values = pastedValues(e);
+      if (values.length < 2 || this._suggestionsOnly) return;
+      e.preventDefault();
+      values.every((id) => (this.addChip({ id }), _Chips.getInstance(this.el) === this));
+    };
+    this._handleChipClick = (e) => {
+      const _chip = e.target.closest(".chip");
+      const clickedClose = !!e.target.closest(".close");
+      if (_chip) {
+        const index = this._chips.indexOf(_chip);
+        if (index < 0) return;
+        if (clickedClose) {
+          this._deleteChip(index, "input");
+        } else {
+          this.selectChip(index);
+        }
+      } else {
+        this._input.focus();
+      }
+    };
+    // Selection follows focus: a chip is selected while focus is inside it, and
+    // none is once focus moves to the input or out of the field.
+    this._handleFocusIn = (e) => {
+      const chip = e.target.closest(".chip");
+      this._setSelected(chip && this._chips.includes(chip) ? chip : null);
+    };
+    this._handleFocusOut = (e) => {
+      if (!this.el.contains(e.relatedTarget)) this._setSelected(null);
+    };
+    this._handleInputFocus = () => {
+      this.el.classList.add("focus");
+    };
+    this._handleInputBlur = () => {
+      this.el.classList.remove("focus");
+    };
+    this._handleInputKeydown = (e) => {
+      if (Utils.isComposing(e)) return;
+      if (e.key === "Enter") {
+        if (this.hasAutocomplete && this.autocomplete?.isOpen && this.autocomplete.container.querySelector('[role="option"]')) {
+          return;
+        }
+        e.preventDefault();
+        if (!this.hasAutocomplete || !this.options.autocompleteOnly) {
+          this.addChip({ id: this._input.value });
+        }
+        this._input.value = "";
+        this.autocomplete?.close();
+      } else if (this._input.value === "" && this.chipsData.length && ["Backspace", _Chips._backKey(this.el)].includes(e.key)) {
+        e.preventDefault();
+        this.selectChip(this.chipsData.length - 1);
+      }
+    };
+    this.el.classList.add("chips");
+    this.chipsData = [];
+    this._chips = [];
+    this._takeName();
+    if (this.options.data.length) {
+      this.chipsData = [...this.options.data];
+      this._renderChips();
+    }
+    if (this.options.allowUserInput) {
+      this.el.classList.add("field");
+      this._setupInput();
+      this._setupEventHandlers();
+      this.el.append(this._end);
+    }
+    this._setupLabel();
+    this._sync();
+    this._initialData = [...this.chipsData];
+  }
+  /**
+   * Selection is drawn by a class now, not by `:focus`, so it does not clear
+   * itself when focus moves - every path that changes the selection has to go
+   * through here or the class and the field drift apart.
+   *
+   * Deliberately no `aria-selected`: the chip is not an option in a listbox,
+   * and putting the attribute on an element with no such role is the same
+   * defect the semantics standard exists to remove.
+   */
+  _setSelected(chip) {
+    this._selectedChip?.classList.remove("selected");
+    this._selectedChip = chip;
+    chip?.classList.add("selected");
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  getData() {
+    return this.chipsData;
+  }
+  destroy() {
+    if (this.autocomplete && Autocomplete.getInstance(this._input) === this.autocomplete) {
+      this.autocomplete.destroy();
+    }
+    this._events.abort();
+    this._chips.forEach((c) => c.remove());
+    this._chips = [];
+    this._giveNameBack();
+    super.destroy();
+  }
+  _setupEventHandlers() {
+    const { signal } = this._events;
+    this.el.addEventListener("click", this._handleChipClick, { signal });
+    this.el.addEventListener("keydown", _Chips._handleChipsKeydown, { signal });
+    this.el.addEventListener("focusin", this._handleFocusIn, { signal });
+    this.el.addEventListener("focusout", this._handleFocusOut, { signal });
+    this._input.addEventListener("focus", this._handleInputFocus, { signal });
+    this._input.addEventListener("blur", this._handleInputBlur, { signal });
+    this._input.addEventListener("keydown", this._handleInputKeydown, { signal });
+    this._input.addEventListener("paste", this._handleInputPaste, { signal });
+  }
+  /**
+   * A text input with a `name` would submit whatever is half typed. The chips
+   * submit under that name instead, one value per chip, as a multiple select
+   * does, so the input gives its name up until destroy().
+   */
+  _takeName() {
+    const input = this._editorInput();
+    this._name = input?.getAttribute("name") ?? "";
+    if (this._name && formAssociated()) this._wrap(input);
+  }
+  /**
+   * Wraps the input in the form control, which takes its name and required.
+   * `display: contents` lays the input out as a child of the field still.
+   */
+  _wrap(input) {
+    this._source = input;
+    this._takeRequired(input);
+    this._control = wrapInControl(CONTROL, input, () => this._validate());
+    this._control.onFormReset = () => this._resetChips();
+    this._validate();
+  }
+  /**
+   * The editor's text field, or null. A static .chips of filter checkboxes,
+   * which AutoInit also starts, keeps its own native form values.
+   */
+  _editorInput() {
+    return this.options.allowUserInput ? this.el.querySelector('input:is(:not([type]), [type="text"])') : null;
+  }
+  /** Where the text field ends: chips go before it, and it goes last. */
+  get _end() {
+    return this._control ?? this._input;
+  }
+  /** After the chips change: give the form one value per chip and update a required field's validity. */
+  _sync() {
+    if (!this._control) return;
+    const data = new FormData();
+    this.chipsData.forEach((chip) => data.append(this._name, String(chip.id)));
+    this._control.internals.setFormValue(data);
+    this._validate();
+  }
+  /**
+   * The chips are what is required, not the text, so `required` moves to the
+   * control, and aria-required keeps telling assistive technology.
+   */
+  _takeRequired(input) {
+    this._required = input.required;
+    if (!this._required) return;
+    this._ariaRequired = input.getAttribute("aria-required");
+    input.required = false;
+    input.setAttribute("aria-required", "true");
+  }
+  /**
+   * A required field is valid once it has a chip, whatever is half typed. The
+   * control holds this validity, apart from any error the page sets on the
+   * input, and anchors it at the input, which a submit then focuses.
+   */
+  _validate() {
+    const internals = this._control.internals;
+    if (this._required && !this._source.readOnly && !this.chipsData.length) {
+      internals.setValidity({ valueMissing: true }, this._requiredMessage, this._anchor);
+    } else internals.setValidity({});
+  }
+  /** The input, unless page script moved it out of the control, where it cannot anchor the message. */
+  get _anchor() {
+    return this._control.contains(this._source) ? this._source : void 0;
+  }
+  /** A validity flag needs a message, so an empty i18n.required falls back to the default. */
+  get _requiredMessage() {
+    return this.options.i18n.required || _defaults.i18n.required;
+  }
+  _resetChips() {
+    this._setSelected(null);
+    this._chips.forEach((chip) => chip.remove());
+    this.chipsData = [...this._initialData];
+    this._chips = this.chipsData.map((chip) => this._renderChip(chip));
+    this._control.before(...this._chips);
+    this._setPlaceholder();
+    this._sync();
+  }
+  /** Unwraps the input, with whatever else went in the control, and gives it its name and required back. */
+  _giveNameBack() {
+    if (!this._control) return;
+    unwrapControl(this._control, this._source);
+    this._control = null;
+    if (!this._required) return;
+    this._source.required = true;
+    restoreAttribute(this._source, "aria-required", this._ariaRequired);
+  }
+  /** Whether only an autocomplete suggestion can become a chip. */
+  get _suggestionsOnly() {
+    return this.hasAutocomplete && this.options.autocompleteOnly;
+  }
+  /** The arrow that points back towards the first chip, which in RTL is Right. */
+  static _backKey(el) {
+    return getComputedStyle(el).direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+  }
+  static _handleChipsKeydown(e) {
+    const chips = e.target.closest(".chips");
+    const tag = e.target.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || !chips) return;
+    const currChips = chips["Expressive_Chips"];
+    if (!currChips) return;
+    if (e.key === "Backspace" || e.key === "Delete") {
+      const index = currChips._chips.indexOf(e.target.closest(".chip"));
+      if (index < 0) return;
+      e.preventDefault();
+      currChips._deleteChip(index, "previous");
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      const current = e.target.closest(".chip") ?? currChips._selectedChip;
+      const index = currChips._chips.indexOf(current);
+      if (index < 0) return;
+      if (e.key === _Chips._backKey(chips)) {
+        if (index > 0) currChips.selectChip(index - 1);
+      } else {
+        const selectIndex = index + 1;
+        if (selectIndex >= currChips.chipsData.length) {
+          currChips._setSelected(null);
+          currChips._input.focus();
+        } else currChips.selectChip(selectIndex);
+      }
+    }
+  }
+  _renderChip(chip) {
+    if (!chip.id && chip.id !== 0) return;
+    const label = chip.text || chip.id;
+    const renderedChip = document.createElement("span");
+    renderedChip.classList.add("chip");
+    renderedChip.innerText = label;
+    if (chip.image) {
+      const img = document.createElement("img");
+      img.setAttribute("src", chip.image);
+      renderedChip.insertBefore(img, renderedChip.firstChild);
+    }
+    if (this.options.allowUserInput) {
+      const closeButton = document.createElement("button");
+      closeButton.type = "button";
+      closeButton.classList.add("close");
+      closeButton.setAttribute("aria-label", `${this.options.i18n.remove} ${label}`);
+      const closeIcon = document.createElement("span");
+      closeIcon.classList.add(this.options.closeIconClass);
+      closeIcon.setAttribute("aria-hidden", "true");
+      closeIcon.innerText = "close";
+      closeButton.appendChild(closeIcon);
+      renderedChip.appendChild(closeButton);
+    }
+    return renderedChip;
+  }
+  _renderChips() {
+    this._chips = [];
+    for (let i = 0; i < this.chipsData.length; i++) {
+      const chipElem = this._renderChip(this.chipsData[i]);
+      this.el.appendChild(chipElem);
+      this._chips.push(chipElem);
+    }
+  }
+  _setupAutocomplete() {
+    this.options.autocompleteOptions.onAutocomplete = (items) => {
+      if (_Chips.getInstance(this.el) !== this) return;
+      if (items.length > 0) {
+        this.addChip({
+          id: items[0].id,
+          text: items[0].text,
+          image: items[0].image
+        });
+        this._input.value = "";
+        this._input.focus();
+      }
+    };
+    const pageOnCreate = this.options.autocompleteOptions.onCreate;
+    this.autocomplete = Autocomplete.init(this._input, {
+      ...this.options.autocompleteOptions,
+      onCreate: (text, autocomplete) => {
+        this._addTyped(text);
+        if (typeof pageOnCreate === "function") pageOnCreate.call(autocomplete, text, autocomplete);
+      }
+    });
+  }
+  /** The "Add" row is a deliberate choice, so it adds a chip even in an autocompleteOnly field. */
+  _addTyped(text) {
+    if (_Chips.getInstance(this.el) !== this) return;
+    this.addChip({ id: text });
+    this._input.value = "";
+    this._input.focus();
+  }
+  _setupInput() {
+    this._input = this.el.querySelector("input");
+    if (!this._input) {
+      this._input = document.createElement("input");
+      this.el.append(this._input);
+    }
+    this._input.classList.add("input");
+    this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
+    if (this.hasAutocomplete) this._setupAutocomplete();
+    this._setPlaceholder();
+    if (!this._input.getAttribute("id")) this._input.setAttribute("id", Utils.guid());
+  }
+  _setupLabel() {
+    this._label = this.el.querySelector("label");
+    if (this._label && this._input) this._label.setAttribute("for", this._input.getAttribute("id"));
+  }
+  _setPlaceholder() {
+    if (!this._input) return;
+    if (!this.chipsData.length && this.options.placeholder) {
+      this._input.placeholder = this.options.placeholder;
+    } else if (this.chipsData.length && this.options.secondaryPlaceholder) {
+      this._input.placeholder = this.options.secondaryPlaceholder;
+    }
+  }
+  _isValidAndNotExist(chip) {
+    const isValid = !!chip.id || chip.id === 0;
+    const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
+    return isValid && doesNotExist;
+  }
+  /**
+   * Add chip to input.
+   * @param chip Chip data object
+   */
+  addChip(chip) {
+    if (!this._isValidAndNotExist(chip) || this.chipsData.length >= this.options.limit) return;
+    const renderedChip = this._renderChip(chip);
+    this._chips.push(renderedChip);
+    this.chipsData.push(chip);
+    if (this._end) this._end.before(renderedChip);
+    else this.el.append(renderedChip);
+    this._setPlaceholder();
+    this._sync();
+    this._notify("chip-add", this.options.onChipAdd, { args: [this.el, renderedChip], detail: { chip: renderedChip }, current: () => this._chips.includes(renderedChip) });
+  }
+  /**
+   * Delete nth chip.
+   * @param chipIndex  Index of chip
+   */
+  deleteChip(chipIndex) {
+    const root = this.el.getRootNode();
+    this._deleteChip(chipIndex, this._chips[chipIndex]?.contains(root.activeElement) ? "input" : null);
+  }
+  _deleteChip(chipIndex, focus) {
+    const chip = this._chips[chipIndex];
+    if (!chip) return;
+    if (this._selectedChip === chip) this._setSelected(null);
+    chip.remove();
+    this._chips.splice(chipIndex, 1);
+    this.chipsData.splice(chipIndex, 1);
+    this._setPlaceholder();
+    this._sync();
+    const focusPath = [];
+    let root = this.el.getRootNode();
+    while (root) {
+      focusPath.push({ root, element: root.activeElement });
+      root = "host" in root ? root.host.getRootNode() : null;
+    }
+    this._notify("chip-delete", this.options.onChipDelete, { args: [this.el, chip], detail: { chip }, current: () => !this._chips.includes(chip) });
+    if (!focus || focusPath.some(({ root: root2, element }) => root2.activeElement !== element) || this.el["Expressive_Chips"] !== this) return;
+    if (focus === "previous" && this._chips.length) this.selectChip(Math.max(chipIndex - 1, 0));
+    else {
+      this._setSelected(null);
+      this._input?.focus();
+    }
+  }
+  /**
+   * Select nth chip.
+   * @param chipIndex Index of chip
+   */
+  selectChip(chipIndex) {
+    const chip = this._chips[chipIndex];
+    if (!chip) return;
+    this._setSelected(chip);
+    chip.querySelector(".close")?.focus();
+    this._notify("chip-select", this.options.onChipSelect, { args: [this.el, chip], detail: { chip }, current: () => this._selectedChip === chip });
+  }
+  static Init() {
+    Utils.onDocumentReady(() => {
+      const chips = document.querySelectorAll(".chips");
+      chips.forEach((el) => {
+        el.addEventListener("click", (e) => {
+          if (!e.target.closest(".close")) return;
+          const chip = e.target.closest(".chip");
+          if (chip && !el["Expressive_Chips"]?._chips.includes(chip)) chip.remove();
+        });
+      });
+    });
+  }
+};
+_Chips.key = "Expressive_Chips";
+var Chips = _Chips;
+
+export {
+  Chips
+};
+//# sourceMappingURL=chunk-WU7XJ4RR.mjs.map

package/dist/js/chunks/chunk-WU7XJ4RR.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/chips.ts"],
+  "sourcesContent": ["import { Utils, restoreAttribute } from '../core/utils';\nimport { Autocomplete, AutocompleteOptions } from './autocomplete';\nimport { Component, BaseOptions } from '../core/component';\nimport { FormControl, formAssociated, wrapInControl, unwrapControl } from '../core/formControl';\n\nexport interface ChipData {\n  /**\n   * Unique identifier.\n   */\n  id: number | string;\n  /**\n   * Chip text. If not specified, \"id\" will be used.\n   */\n  text?: string;\n  /**\n   * Chip image (URL).\n   */\n  image?: string;\n}\n\n/** The form control a named field submits through, wrapping its input. */\nconst CONTROL = 'expressive-chips-control';\n\n/** The values in pasted text, split by commas, tabs or lines. */\nconst pastedValues = (e: ClipboardEvent) =>\n  (e.clipboardData?.getData('text') ?? '').split(/[,\\t\\n]/).map((value) => value.trim()).filter(Boolean);\n\nexport interface ChipsI18nOptions {\n  /** Prefix for the delete button's accessible name. */\n  remove: string;\n  /** What a required field says while it has no chips. */\n  required: string;\n}\n\nexport interface ChipsOptions extends BaseOptions {\n  /**\n   * Set the chip data.\n   * @default []\n   */\n  data: ChipData[];\n  /**\n   * Set first placeholder when there are no tags.\n   * @default \"\"\n   */\n  placeholder: string;\n  /**\n   * Set second placeholder when adding additional tags.\n   * @default \"\"\n   */\n  secondaryPlaceholder: string;\n  /**\n   * Set autocomplete options.\n   * @default {}\n   */\n  autocompleteOptions: Partial<AutocompleteOptions>;\n  /**\n   * Toggles abililty to add custom value not in autocomplete list.\n   * @default false\n   */\n  autocompleteOnly: boolean;\n  /**\n   * Set chips limit.\n   * @default Infinity\n   */\n  limit: number;\n  /**\n   * Specifies class to be used in \"close\" button.\n   * @default 'material-symbols'\n   */\n  closeIconClass: string;\n  /**\n   *  Specifies option to render user input field\n   *  @default false;\n   */\n  allowUserInput: boolean;\n  /**\n   * Strings the component generates. `remove` prefixes the delete button's\n   * accessible name, giving \"Remove Apple\". `required` is what a required\n   * field says while it has no chips.\n   * @default { remove: 'Remove', required: 'Add at least one item.' }\n   */\n  i18n: Partial<ChipsI18nOptions>;\n  /**\n   * Callback for chip add.\n   * @default null\n   */\n  onChipAdd: (element: HTMLElement, chip: HTMLElement) => void;\n  /**\n   * Callback for chip select.\n   * @default null\n   */\n  onChipSelect: (element: HTMLElement, chip: HTMLElement) => void;\n  /**\n   * Callback for chip delete.\n   * @default null\n   */\n  onChipDelete: (element: HTMLElement, chip: HTMLElement) => void;\n}\n\nconst _defaults: ChipsOptions = {\n  data: [],\n  placeholder: '',\n  secondaryPlaceholder: '',\n  closeIconClass: 'material-symbols',\n  autocompleteOptions: {},\n  autocompleteOnly: false,\n  limit: Infinity,\n  allowUserInput: false,\n  i18n: { remove: 'Remove', required: 'Add at least one item.' },\n  onChipAdd: null,\n  onChipSelect: null,\n  onChipDelete: null\n};\n\nexport class Chips extends Component<ChipsOptions> {\n  /** Array of the current chips data. */\n  chipsData: ChipData[];\n  /** If the chips has autocomplete enabled. */\n  hasAutocomplete: boolean;\n  /** Autocomplete instance, if any. */\n  autocomplete: Autocomplete;\n  _input: HTMLInputElement;\n  _label: HTMLLabelElement;\n  _chips: HTMLElement[];\n  private _selectedChip: HTMLElement;\n  /** The form name the text input had, which the chips submit instead. */\n  private _name = '';\n  /** The chips the field started with, which a form reset puts back. */\n  private _initialData: ChipData[] = [];\n  /** The input's own aria-required, or null, put back on destroy. */\n  private _ariaRequired: string | null = null;\n  /** The form control wrapping a named input, which the form reads instead of it. */\n  private _control: FormControl | null = null;\n  /** The named text input, whose form, disabled state and required the chips take over. */\n  private _source: HTMLInputElement | null = null;\n  private _required = false;\n\n  /**\n   * Selection is drawn by a class now, not by `:focus`, so it does not clear\n   * itself when focus moves - every path that changes the selection has to go\n   * through here or the class and the field drift apart.\n   *\n   * Deliberately no `aria-selected`: the chip is not an option in a listbox,\n   * and putting the attribute on an element with no such role is the same\n   * defect the semantics standard exists to remove.\n   */\n  private _setSelected(chip: HTMLElement | null) {\n    this._selectedChip?.classList.remove('selected');\n    this._selectedChip = chip;\n    chip?.classList.add('selected');\n  }\n\n  constructor(el: HTMLElement, options: Partial<ChipsOptions>) {\n    super(el, options);\n\n    this.el.classList.add('chips');\n    this.chipsData = [];\n    this._chips = [];\n    this._takeName();\n\n    // Render initial chips\n    if (this.options.data.length) {\n      // A copy: adding or deleting a chip would otherwise edit the caller's\n      // array, and a batch init would have every instance share one list.\n      this.chipsData = [...this.options.data];\n      this._renderChips();\n    }\n\n    // Render input element, setup event handlers\n    if (this.options.allowUserInput) {\n      this.el.classList.add('field');\n      this._setupInput();\n      this._setupEventHandlers();\n      // move input to end, inside its control when it has one\n      this.el.append(this._end);\n    }\n    // After _setupInput: the label points at the input's id, which is only\n    // assigned there. Running this first threw on any .chips with a <label>.\n    this._setupLabel();\n    this._sync();\n    // After autocomplete, which can turn the input's value into a chip.\n    this._initialData = [...this.chipsData];\n  }\n\n  static get defaults() {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Chips';\n\n  getData() {\n    return this.chipsData;\n  }\n\n  destroy() {\n    if (this.autocomplete && Autocomplete.getInstance(this._input) === this.autocomplete) {\n      this.autocomplete.destroy();\n    }\n    this._events.abort();\n    this._chips.forEach((c) => c.remove());\n    this._chips = [];\n    this._giveNameBack();\n    super.destroy();\n  }\n\n  _setupEventHandlers() {\n    const { signal } = this._events;\n    this.el.addEventListener('click', this._handleChipClick, { signal });\n    this.el.addEventListener('keydown', Chips._handleChipsKeydown, { signal });\n    this.el.addEventListener('focusin', this._handleFocusIn, { signal });\n    this.el.addEventListener('focusout', this._handleFocusOut, { signal });\n    this._input.addEventListener('focus', this._handleInputFocus, { signal });\n    this._input.addEventListener('blur', this._handleInputBlur, { signal });\n    this._input.addEventListener('keydown', this._handleInputKeydown, { signal });\n    this._input.addEventListener('paste', this._handleInputPaste, { signal });\n  }\n\n  /**\n   * A text input with a `name` would submit whatever is half typed. The chips\n   * submit under that name instead, one value per chip, as a multiple select\n   * does, so the input gives its name up until destroy().\n   */\n  private _takeName() {\n    const input = this._editorInput();\n    this._name = input?.getAttribute('name') ?? '';\n    // ponytail: without form-associated custom elements (jsdom) the input keeps its name and submits its text.\n    if (this._name && formAssociated()) this._wrap(input);\n  }\n\n  /**\n   * Wraps the input in the form control, which takes its name and required.\n   * `display: contents` lays the input out as a child of the field still.\n   */\n  private _wrap(input: HTMLInputElement) {\n    this._source = input;\n    this._takeRequired(input);\n    // The control follows the input's disabled state and form; a read-only input is not validated, so its required no longer counts.\n    this._control = wrapInControl(CONTROL, input, () => this._validate());\n    this._control.onFormReset = () => this._resetChips();\n    this._validate();\n  }\n\n  /**\n   * The editor's text field, or null. A static .chips of filter checkboxes,\n   * which AutoInit also starts, keeps its own native form values.\n   */\n  private _editorInput() {\n    return this.options.allowUserInput ? this.el.querySelector<HTMLInputElement>('input:is(:not([type]), [type=\"text\"])') : null;\n  }\n\n  /** Where the text field ends: chips go before it, and it goes last. */\n  private get _end() {\n    return this._control ?? this._input;\n  }\n\n  /** After the chips change: give the form one value per chip and update a required field's validity. */\n  private _sync() {\n    if (!this._control) return;\n    const data = new FormData();\n    this.chipsData.forEach((chip) => data.append(this._name, String(chip.id)));\n    this._control.internals.setFormValue(data);\n    this._validate();\n  }\n\n  /**\n   * The chips are what is required, not the text, so `required` moves to the\n   * control, and aria-required keeps telling assistive technology.\n   */\n  private _takeRequired(input: HTMLInputElement) {\n    this._required = input.required;\n    if (!this._required) return;\n    this._ariaRequired = input.getAttribute('aria-required');\n    input.required = false;\n    input.setAttribute('aria-required', 'true');\n  }\n\n  /**\n   * A required field is valid once it has a chip, whatever is half typed. The\n   * control holds this validity, apart from any error the page sets on the\n   * input, and anchors it at the input, which a submit then focuses.\n   */\n  private _validate() {\n    const internals = this._control.internals;\n    if (this._required && !this._source.readOnly && !this.chipsData.length) {\n      internals.setValidity({ valueMissing: true }, this._requiredMessage, this._anchor);\n    } else internals.setValidity({});\n  }\n\n  /** The input, unless page script moved it out of the control, where it cannot anchor the message. */\n  private get _anchor() {\n    return this._control.contains(this._source) ? this._source : undefined;\n  }\n\n  /** A validity flag needs a message, so an empty i18n.required falls back to the default. */\n  private get _requiredMessage() {\n    return this.options.i18n.required || _defaults.i18n.required;\n  }\n\n  private _resetChips() {\n    this._setSelected(null);\n    this._chips.forEach((chip) => chip.remove());\n    this.chipsData = [...this._initialData];\n    this._chips = this.chipsData.map((chip) => this._renderChip(chip));\n    this._control.before(...this._chips);\n    this._setPlaceholder();\n    this._sync();\n  }\n\n  /** Unwraps the input, with whatever else went in the control, and gives it its name and required back. */\n  private _giveNameBack() {\n    if (!this._control) return;\n    unwrapControl(this._control, this._source);\n    this._control = null;\n    if (!this._required) return;\n    this._source.required = true;\n    restoreAttribute(this._source, 'aria-required', this._ariaRequired);\n  }\n\n  /** Whether only an autocomplete suggestion can become a chip. */\n  private get _suggestionsOnly() {\n    return this.hasAutocomplete && this.options.autocompleteOnly;\n  }\n\n  /** Pasted text that lists several values, split by commas, tabs or lines, adds a chip for each. */\n  _handleInputPaste = (e: ClipboardEvent) => {\n    const values = pastedValues(e);\n    if (values.length < 2 || this._suggestionsOnly) return;\n    e.preventDefault();\n    // An add callback can destroy or replace the instance; the rest of the paste is its.\n    values.every((id) => (this.addChip({ id }), Chips.getInstance(this.el) === this));\n  };\n\n  _handleChipClick = (e: MouseEvent) => {\n    const _chip = (<HTMLElement>e.target).closest('.chip');\n    // closest, not classList: the close button now wraps an icon span, so a\n    // click on the glyph reports the span as the target.\n    const clickedClose = !!(<HTMLElement>e.target).closest('.close');\n    if (_chip) {\n      // Index into the chip list, not into the container's children: the\n      // container also holds the label and the input, so counting children\n      // gave an index that did not line up with chipsData.\n      const index = this._chips.indexOf(_chip as HTMLElement);\n      if (index < 0) return;\n      if (clickedClose) {\n        this._deleteChip(index, 'input');\n      } else {\n        this.selectChip(index);\n      }\n      // Default handle click to focus on input\n    } else {\n      this._input.focus();\n    }\n  };\n\n  /** The arrow that points back towards the first chip, which in RTL is Right. */\n  private static _backKey(el: Element) {\n    return getComputedStyle(el).direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n  }\n\n  static _handleChipsKeydown(e: KeyboardEvent) {\n    const chips = (<HTMLElement>e.target).closest('.chips');\n\n    // Don't handle keydown inputs on input and textarea\n    const tag = (<HTMLElement>e.target).tagName;\n    if (tag === 'INPUT' || tag === 'TEXTAREA' || !chips) return;\n\n    const currChips: Chips = chips['Expressive_Chips'];\n    if (!currChips) return; // .chips markup without an instance behind it\n\n    if (e.key === 'Backspace' || e.key === 'Delete') {\n      const index = currChips._chips.indexOf((e.target as HTMLElement).closest('.chip'));\n      if (index < 0) return;\n      e.preventDefault();\n      currChips._deleteChip(index, 'previous');\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n      // Move from the chip that has focus, the same one Backspace deletes.\n      const current = (e.target as HTMLElement).closest<HTMLElement>('.chip') ?? currChips._selectedChip;\n      const index = currChips._chips.indexOf(current);\n      if (index < 0) return;\n      if (e.key === Chips._backKey(chips)) {\n        if (index > 0) currChips.selectChip(index - 1);\n      } else {\n        const selectIndex = index + 1;\n        if (selectIndex >= currChips.chipsData.length) {\n          // Walking off the end returns to the input, so nothing is selected\n          // any more - without this the last chip kept the class.\n          currChips._setSelected(null);\n          currChips._input.focus();\n        }\n        else currChips.selectChip(selectIndex);\n      }\n    }\n  }\n\n  // Selection follows focus: a chip is selected while focus is inside it, and\n  // none is once focus moves to the input or out of the field.\n  _handleFocusIn = (e: FocusEvent) => {\n    const chip = (e.target as HTMLElement).closest<HTMLElement>('.chip');\n    this._setSelected(chip && this._chips.includes(chip) ? chip : null);\n  };\n\n  _handleFocusOut = (e: FocusEvent) => {\n    if (!this.el.contains(e.relatedTarget as Node | null)) this._setSelected(null);\n  };\n\n  _handleInputFocus = () => {\n    this.el.classList.add('focus');\n  };\n\n  _handleInputBlur = () => {\n    this.el.classList.remove('focus');\n  };\n\n  _handleInputKeydown = (e: KeyboardEvent) => {\n    // Enter that confirms an IME composition is not a request to add a chip.\n    if (Utils.isComposing(e)) return;\n    if (e.key === 'Enter') {\n      // Override enter if autocompleting.\n      if (this.hasAutocomplete && this.autocomplete?.isOpen &&\n        this.autocomplete.container.querySelector('[role=\"option\"]')) {\n        return;\n      }\n      e.preventDefault();\n      if (!this.hasAutocomplete || !this.options.autocompleteOnly) {\n        this.addChip({ id: this._input.value });\n      }\n      this._input.value = '';\n      // The list answered the text Enter just used up.\n      this.autocomplete?.close();\n    } else if (\n      this._input.value === '' &&\n      this.chipsData.length &&\n      ['Backspace', Chips._backKey(this.el)].includes(e.key)\n    ) {\n      e.preventDefault();\n      this.selectChip(this.chipsData.length - 1);\n    }\n  };\n\n  _renderChip(chip: ChipData): HTMLElement {\n    if (!chip.id && chip.id !== 0) return;\n    const label = chip.text || <string>chip.id;\n    // <span>, not <div>: a chip is inline, and the container itself is not a\n    // control. It used to be a <div tabindex=\"0\"> with no role - focusable,\n    // and announcing nothing.\n    const renderedChip = document.createElement('span');\n    renderedChip.classList.add('chip');\n    renderedChip.innerText = label;\n    // attach image if needed\n    if (chip.image) {\n      const img = document.createElement('img');\n      img.setAttribute('src', chip.image);\n      renderedChip.insertBefore(img, renderedChip.firstChild);\n    }\n    if (this.options.allowUserInput) {\n      // The delete affordance is the control, so it is the <button> and it\n      // carries the name. `type` is explicit because a bare button inside a\n      // form submits it.\n      const closeButton = document.createElement('button');\n      closeButton.type = 'button';\n      closeButton.classList.add('close');\n      closeButton.setAttribute('aria-label', `${this.options.i18n.remove} ${label}`);\n      // The ligature is text and is read out, so the glyph is hidden and the\n      // button's own label is what gets announced.\n      const closeIcon = document.createElement('span');\n      closeIcon.classList.add(this.options.closeIconClass);\n      closeIcon.setAttribute('aria-hidden', 'true');\n      closeIcon.innerText = 'close';\n      closeButton.appendChild(closeIcon);\n      renderedChip.appendChild(closeButton);\n    }\n    return renderedChip;\n  }\n\n  _renderChips() {\n    this._chips = []; //.remove();\n    for (let i = 0; i < this.chipsData.length; i++) {\n      const chipElem = this._renderChip(this.chipsData[i]);\n      this.el.appendChild(chipElem);\n      this._chips.push(chipElem);\n    }\n  }\n\n  _setupAutocomplete() {\n    this.options.autocompleteOptions.onAutocomplete = (items) => {\n      if (Chips.getInstance(this.el) !== this) return;\n      if (items.length > 0) {\n        this.addChip({\n          id: items[0].id,\n          text: items[0].text,\n          image: items[0].image\n        });\n        this._input.value = '';\n        this._input.focus();\n      }\n    };\n    // A new object, so a second Chips given the same options does not wrap this wrapper.\n    const pageOnCreate = this.options.autocompleteOptions.onCreate;\n    this.autocomplete = Autocomplete.init(this._input, {\n      ...this.options.autocompleteOptions,\n      onCreate: (text, autocomplete) => {\n        this._addTyped(text);\n        if (typeof pageOnCreate === 'function') pageOnCreate.call(autocomplete, text, autocomplete);\n      }\n    });\n  }\n\n  /** The \"Add\" row is a deliberate choice, so it adds a chip even in an autocompleteOnly field. */\n  private _addTyped(text: string) {\n    if (Chips.getInstance(this.el) !== this) return;\n    this.addChip({ id: text });\n    this._input.value = '';\n    this._input.focus();\n  }\n\n  _setupInput() {\n    this._input = this.el.querySelector('input');\n    if (!this._input) {\n      this._input = document.createElement('input');\n      this.el.append(this._input);\n    }\n    this._input.classList.add('input');\n    this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;\n    // Setup autocomplete if needed\n    if (this.hasAutocomplete) this._setupAutocomplete();\n    this._setPlaceholder();\n    // Set input id\n    if (!this._input.getAttribute('id')) this._input.setAttribute('id', Utils.guid());\n  }\n\n  _setupLabel() {\n    this._label = this.el.querySelector('label');\n    // No input to point at when allowUserInput is off.\n    if (this._label && this._input) this._label.setAttribute('for', this._input.getAttribute('id'));\n  }\n\n  _setPlaceholder() {\n    if (!this._input) return;\n    if (!this.chipsData.length && this.options.placeholder) {\n      this._input.placeholder = this.options.placeholder;\n    } else if (this.chipsData.length && this.options.secondaryPlaceholder) {\n      this._input.placeholder = this.options.secondaryPlaceholder;\n    }\n  }\n\n  _isValidAndNotExist(chip: ChipData) {\n    const isValid = !!chip.id || chip.id === 0;\n    const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);\n    return isValid && doesNotExist;\n  }\n\n  /**\n   * Add chip to input.\n   * @param chip Chip data object\n   */\n  addChip(chip: ChipData) {\n    if (!this._isValidAndNotExist(chip) || this.chipsData.length >= this.options.limit) return;\n    const renderedChip = this._renderChip(chip);\n    this._chips.push(renderedChip);\n    this.chipsData.push(chip);\n    if (this._end) this._end.before(renderedChip);\n    else this.el.append(renderedChip);\n    this._setPlaceholder();\n    this._sync();\n    this._notify('chip-add', this.options.onChipAdd, { args: [this.el, renderedChip], detail: { chip: renderedChip }, current: () => this._chips.includes(renderedChip) });\n  }\n\n  /**\n   * Delete nth chip.\n   * @param chipIndex  Index of chip\n   */\n  deleteChip(chipIndex: number) {\n    const root = this.el.getRootNode() as Document | ShadowRoot;\n    this._deleteChip(chipIndex, this._chips[chipIndex]?.contains(root.activeElement) ? 'input' : null);\n  }\n\n  private _deleteChip(chipIndex: number, focus: 'input' | 'previous' | null) {\n    const chip = this._chips[chipIndex];\n    if (!chip) return;\n    if (this._selectedChip === chip) this._setSelected(null);\n    chip.remove();\n    this._chips.splice(chipIndex, 1);\n    this.chipsData.splice(chipIndex, 1);\n    this._setPlaceholder();\n    this._sync();\n    const focusPath: { root: Document | ShadowRoot; element: Element | null }[] = [];\n    let root = this.el.getRootNode() as Document | ShadowRoot;\n    while (root) {\n      focusPath.push({ root, element: root.activeElement });\n      root = 'host' in root ? root.host.getRootNode() as Document | ShadowRoot : null;\n    }\n    this._notify('chip-delete', this.options.onChipDelete, { args: [this.el, chip], detail: { chip }, current: () => !this._chips.includes(chip) });\n    if (!focus || focusPath.some(({ root, element }) => root.activeElement !== element) || this.el['Expressive_Chips'] !== this) return;\n    if (focus === 'previous' && this._chips.length) this.selectChip(Math.max(chipIndex - 1, 0));\n    else {\n      this._setSelected(null);\n      this._input?.focus();\n    }\n  }\n\n  /**\n   * Select nth chip.\n   * @param chipIndex Index of chip\n   */\n  selectChip(chipIndex: number) {\n    const chip = this._chips[chipIndex];\n    if (!chip) return;\n    this._setSelected(chip);\n    // The chip is not a control any more, so focus goes to the one thing in it\n    // that is - the delete button.\n    (chip.querySelector('.close') as HTMLElement | null)?.focus();\n    this._notify('chip-select', this.options.onChipSelect, { args: [this.el, chip], detail: { chip }, current: () => this._selectedChip === chip });\n  }\n\n  static Init() {\n    // Handle removal of static chips - markup written by hand, which no Chips\n    // instance tracks even when one sits on the container (AutoInit gives every\n    // .chips one, usually without allowUserInput and so without a click\n    // handler). A chip the instance rendered belongs to _handleChipClick:\n    // removing the node here as well left chipsData holding an entry whose\n    // element was gone.\n    Utils.onDocumentReady(() => {\n      const chips = document.querySelectorAll('.chips');\n      chips.forEach((el) => {\n        el.addEventListener('click', (e) => {\n          // closest: the close button wraps an icon span, so a click on the\n          // glyph reports the span.\n          if (!(<HTMLElement>e.target).closest('.close')) return;\n          const chip = (<HTMLElement>e.target).closest<HTMLElement>('.chip');\n          if (chip && !(el['Expressive_Chips'] as Chips | undefined)?._chips.includes(chip)) chip.remove();\n        });\n      });\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["root"]
+}

package/dist/js/chunks/chunk-X7SDA2J5.mjs

@@ -0,0 +1,116 @@
+import {
+  Component
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  restoreAttribute
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/showMore.ts
+var _defaults = {
+  onOpen: null,
+  onClose: null,
+  i18n: { showLess: "Show less" }
+};
+var CLAMP_PROPERTIES = ["-webkit-line-clamp", "line-clamp"];
+var BUTTON_ATTRIBUTES = ["aria-expanded", "aria-controls", "hidden"];
+function labelNode(button) {
+  const walker = button.ownerDocument.createTreeWalker(button, NodeFilter.SHOW_TEXT);
+  let label = null;
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (node.textContent.trim() && !node.parentElement.closest('[aria-hidden="true"]')) label = node;
+  }
+  return label;
+}
+var _ShowMore = class _ShowMore extends Component {
+  constructor(el, options) {
+    super(el, options);
+    this.isOpen = false;
+    // Attributes as they were before init, so destroy() can restore them.
+    this._initial = {};
+    this._initialId = null;
+    this._label = null;
+    this._moreLabel = "";
+    this._observer = null;
+    /** Shows the full text. */
+    this.open = () => {
+      if (this.isOpen || !this.button) return;
+      this._show(true);
+      this._notify("open", this.options.onOpen, { current: () => this.isOpen });
+    };
+    /** Clamps the text again. */
+    this.close = () => {
+      if (!this.isOpen) return;
+      this._show(false);
+      this._notify("close", this.options.onClose, { current: () => !this.isOpen });
+    };
+    this._toggle = () => this.isOpen ? this.close() : this.open();
+    /**
+     * Hides the button while the clamped text fits. Open text keeps it. So does
+     * focus, so a resize cannot hide the button someone is on and drop focus on
+     * the page. The check runs again on blur, which also hides a button whose
+     * text was collapsed after it widened to fit, since collapsing it then
+     * leaves the box the same size.
+     */
+    this._fit = () => {
+      if (this.isOpen || this.button.matches(":focus") || _ShowMore.getInstance(this.el) !== this) return;
+      this.button.hidden = this.text.scrollHeight - this.text.clientHeight <= 1;
+    };
+    this.text = el.querySelector(":scope > :is(.line-clamp-1, .line-clamp-2, .line-clamp-3)");
+    this.button = el.querySelector(":scope > button");
+    if (!this.text || !this.button) return;
+    this._wire();
+    const { signal } = this._events;
+    this.button.addEventListener("click", this._toggle, { signal });
+    this.button.addEventListener("blur", this._fit, { signal });
+    this._observer = new ResizeObserver(this._fit);
+    this._observer.observe(this.text);
+    el.ownerDocument.fonts?.ready.then(this._fit);
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    if (this.button) {
+      this._observer.disconnect();
+      if (this.isOpen) this._show(false);
+      for (const name of BUTTON_ATTRIBUTES) restoreAttribute(this.button, name, this._initial[name]);
+      restoreAttribute(this.text, "id", this._initialId);
+    }
+    super.destroy();
+  }
+  /** Records what destroy() restores, then points the button at the text. */
+  _wire() {
+    for (const name of BUTTON_ATTRIBUTES) this._initial[name] = this.button.getAttribute(name);
+    this._initialId = this.text.getAttribute("id");
+    if (!this.text.id) this.text.id = `show-more-${Utils.guid()}`;
+    this._label = labelNode(this.button);
+    if (this._label) this._moreLabel = this._label.data;
+    this.button.ariaExpanded = "false";
+    this.button.setAttribute("aria-controls", this.text.id);
+  }
+  _show(open) {
+    this.isOpen = open;
+    this.button.ariaExpanded = String(open);
+    if (this._label) this._label.data = open ? this._lessLabel() : this._moreLabel;
+    this._clamp(!open);
+  }
+  _lessLabel() {
+    return this.button.dataset.showLess || this.options.i18n.showLess;
+  }
+  _clamp(on) {
+    if (on) this._restoreClamp();
+    else for (const property of CLAMP_PROPERTIES) this.text.style.setProperty(property, "unset");
+  }
+  _restoreClamp() {
+    for (const property of CLAMP_PROPERTIES) this.text.style.removeProperty(property);
+    if (!this.text.style.length) this.text.removeAttribute("style");
+  }
+};
+_ShowMore.key = "Expressive_ShowMore";
+var ShowMore = _ShowMore;
+
+export {
+  ShowMore
+};
+//# sourceMappingURL=chunk-X7SDA2J5.mjs.map