@expressivecss/expressive 0.15.0 → 0.17.0

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

@@ -0,0 +1,232 @@
+import {
+  Component
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  afterFormReset,
+  controllerFor
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/components/colorPicker.ts
+var _defaults = {
+  onChange: null,
+  i18n: {
+    area: "Saturation and brightness",
+    value: (saturation, brightness) => `Saturation ${saturation}%, brightness ${brightness}%`,
+    hue: "Hue",
+    hex: "Hex color"
+  }
+};
+var clamp = (n) => Math.min(1, Math.max(0, n));
+function hueOf(r, g, b) {
+  const max = Math.max(r, g, b);
+  const range = max - Math.min(r, g, b);
+  if (!range) return 0;
+  const sector = max === r ? (g - b) / range : max === g ? (b - r) / range + 2 : (r - g) / range + 4;
+  return (sector * 60 + 360) % 360;
+}
+function toHsv(hex) {
+  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!match) return null;
+  const digits = match[1].length === 3 ? [...match[1]].map((c) => c + c).join("") : match[1];
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16) / 255);
+  const max = Math.max(r, g, b);
+  return { h: hueOf(r, g, b), s: max ? (max - Math.min(r, g, b)) / max : 0, v: max };
+}
+function toHex({ h, s, v }) {
+  const channel = (n) => {
+    const k = (n + h / 60) % 6;
+    return v - v * s * Math.max(0, Math.min(k, 4 - k, 1));
+  };
+  return "#" + [5, 3, 1].map((n) => Math.round(channel(n) * 255).toString(16).padStart(2, "0")).join("");
+}
+var KEY_STEPS = {
+  ArrowRight: [1, 0],
+  ArrowLeft: [-1, 0],
+  ArrowUp: [0, 1],
+  ArrowDown: [0, -1],
+  PageUp: [0, 10],
+  PageDown: [0, -10],
+  Home: [-100, 0],
+  End: [100, 0]
+};
+var ColorPicker = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    this._hsv = { h: 0, s: 0, v: 0 };
+    this._area = null;
+    this._thumb = null;
+    this._hue = null;
+    this._hex = null;
+    // Set while the picker writes the native input, so its own events are not
+    // read back as an outside change.
+    this._writing = false;
+    // The person used the browser's own picker on the native input.
+    this._onNativeInput = () => {
+      if (this._writing || !this.input) return;
+      const hsv = toHsv(this.input.value);
+      if (!hsv) return;
+      this._hsv = hsv;
+      this._render();
+    };
+    this._onHex = () => {
+      const hsv = toHsv(this._hex.value);
+      if (hsv && toHex(hsv) !== this.input.value) this._set(hsv);
+      this._hex.value = toHex(this._hsv);
+    };
+    this._onPointerDown = (e) => {
+      if (e.button || this.input.disabled) return;
+      const area = this._area;
+      e.preventDefault();
+      this._thumb.focus();
+      area.setPointerCapture(e.pointerId);
+      this._fromPoint(e, false);
+      const move = (ev) => this._fromPoint(ev, false);
+      const drag = controllerFor(area);
+      const up = (ev) => {
+        drag.abort();
+        this._fromPoint(ev, true);
+      };
+      const { signal } = drag;
+      area.addEventListener("pointermove", move, { signal });
+      area.addEventListener("pointerup", up, { signal });
+      area.addEventListener("pointercancel", up, { signal });
+    };
+    // Left and right change saturation, up and down brightness; see KEY_STEPS.
+    this._onKeyDown = (e) => {
+      const steps = this._keySteps(e);
+      if (!steps) return;
+      e.preventDefault();
+      const unit = e.shiftKey ? 0.1 : 0.01;
+      const { s, v } = this._hsv;
+      this._set({ ...this._hsv, s: clamp(s + steps[0] * unit), v: clamp(v + steps[1] * unit) });
+    };
+    this.input = el.querySelector(':scope > input[type="color"]');
+    if (!this.input) return;
+    this._hsv = toHsv(this.input.value) ?? this._hsv;
+    this._build();
+    this.input.addEventListener("input", this._onNativeInput, { signal: this._events.signal });
+    afterFormReset(this.input, this._onNativeInput, this._events.signal);
+    this._render();
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    for (const part of [this._area, this._hue, this._hex]) part?.remove();
+    this._area = this._thumb = this._hue = this._hex = null;
+    this.el.style.removeProperty("--_color-picker-hue");
+    super.destroy();
+  }
+  /** The current color as `#rrggbb`. Setting it fires no events, as with a native input. */
+  get value() {
+    return this.input?.value ?? "";
+  }
+  set value(hex) {
+    const hsv = toHsv(hex);
+    if (!hsv || !this.input) return;
+    this._hsv = hsv;
+    this._writing = true;
+    this.input.value = toHex(hsv);
+    this._writing = false;
+    this._render();
+  }
+  _build() {
+    const disabled = this.input.disabled;
+    const { i18n } = this.options;
+    const area = document.createElement("div");
+    area.className = "color-picker-area";
+    const thumb = document.createElement("div");
+    thumb.className = "color-picker-thumb";
+    thumb.setAttribute("role", "slider");
+    thumb.setAttribute("aria-label", i18n.area);
+    thumb.setAttribute("aria-valuemin", "0");
+    thumb.setAttribute("aria-valuemax", "100");
+    thumb.tabIndex = disabled ? -1 : 0;
+    if (disabled) thumb.setAttribute("aria-disabled", "true");
+    area.append(thumb);
+    const hue = document.createElement("input");
+    hue.type = "range";
+    hue.className = "color-picker-hue";
+    hue.min = "0";
+    hue.max = "359";
+    hue.setAttribute("aria-label", i18n.hue);
+    hue.disabled = disabled;
+    const hex = document.createElement("input");
+    hex.type = "text";
+    hex.className = "color-picker-hex";
+    hex.setAttribute("aria-label", i18n.hex);
+    hex.autocomplete = "off";
+    hex.spellcheck = false;
+    hex.maxLength = 7;
+    hex.disabled = disabled;
+    this.input.before(area, hue);
+    this.input.after(hex);
+    this._area = area;
+    this._thumb = thumb;
+    this._hue = hue;
+    this._hex = hex;
+    area.addEventListener("pointerdown", this._onPointerDown);
+    thumb.addEventListener("keydown", this._onKeyDown);
+    hue.addEventListener("input", () => this._set({ ...this._hsv, h: Number(hue.value) }, false));
+    hue.addEventListener("change", () => this._commit());
+    hex.addEventListener("change", this._onHex);
+    hex.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !Utils.isComposing(e)) {
+        e.preventDefault();
+        this._onHex();
+      }
+    });
+  }
+  _render() {
+    const { h, s, v } = this._hsv;
+    const hex = toHex(this._hsv);
+    const thumb = this._thumb;
+    this.el.style.setProperty("--_color-picker-hue", String(Math.round(h)));
+    thumb.style.setProperty("--_color-picker-x", String(s));
+    thumb.style.setProperty("--_color-picker-y", String(1 - v));
+    thumb.style.setProperty("--_color-picker-color", hex);
+    thumb.setAttribute("aria-valuenow", String(Math.round(s * 100)));
+    thumb.setAttribute("aria-valuetext", this.options.i18n.value(Math.round(s * 100), Math.round(v * 100)));
+    this._hue.value = String(Math.round(h));
+    this._hex.value = hex;
+  }
+  // Store the color, write it to the native input and fire `input`; with
+  // `commit`, also fire `change` and onChange.
+  // Only reached from the built controls, which a disabled input disables.
+  _set(hsv, commit = true) {
+    const input = this.input;
+    this._hsv = hsv;
+    const hex = toHex(hsv);
+    const changed = input.value !== hex;
+    this._writing = true;
+    input.value = hex;
+    if (changed) input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this._writing = false;
+    this._render();
+    if (commit) this._commit();
+  }
+  _commit() {
+    if (!this.input) return;
+    this._writing = true;
+    this.input.dispatchEvent(new Event("change", { bubbles: true }));
+    this._writing = false;
+    this.options.onChange?.(this.input.value);
+  }
+  _fromPoint(e, commit) {
+    const box = this._area.getBoundingClientRect();
+    const s = clamp((e.clientX - box.left) / box.width);
+    const v = 1 - clamp((e.clientY - box.top) / box.height);
+    this._set({ ...this._hsv, s, v }, commit);
+  }
+  /** How a key moves the point. Shift is the larger step; Alt, Ctrl and Meta stay the browser's. */
+  _keySteps(e) {
+    return Utils.plainKey(e) && !this.input.disabled ? KEY_STEPS[e.key] : void 0;
+  }
+};
+ColorPicker.key = "Expressive_ColorPicker";
+
+export {
+  ColorPicker
+};
+//# sourceMappingURL=chunk-CWMQOT4O.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/colorPicker.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils, afterFormReset, controllerFor } from '../core/utils';\n\nexport interface ColorPickerI18n {\n  /** The name of the saturation and brightness area. */\n  area: string;\n  /** What the area reports as its value, from two whole percentages. */\n  value: (saturation: number, brightness: number) => string;\n  /** The name of the hue slider. */\n  hue: string;\n  /** The name of the hex field. */\n  hex: string;\n}\n\nexport interface ColorPickerOptions extends BaseOptions {\n  /**\n   * Called with the new `#rrggbb` value when a change is committed: the end\n   * of a drag, a key press, a hue release or a typed hex value.\n   * @default null\n   */\n  onChange: ((value: string) => void) | null;\n  /** The accessible names, for a page in another language. */\n  i18n: Partial<ColorPickerI18n>;\n}\n\nconst _defaults: ColorPickerOptions = {\n  onChange: null,\n  i18n: {\n    area: 'Saturation and brightness',\n    value: (saturation, brightness) => `Saturation ${saturation}%, brightness ${brightness}%`,\n    hue: 'Hue',\n    hex: 'Hex color'\n  }\n};\n\n/** Hue in degrees, saturation and value from 0 to 1. */\ninterface Hsv { h: number; s: number; v: number }\n\nconst clamp = (n: number) => Math.min(1, Math.max(0, n));\n\n// Hue in degrees of an RGB color with channels from 0 to 1.\nfunction hueOf(r: number, g: number, b: number): number {\n  const max = Math.max(r, g, b);\n  const range = max - Math.min(r, g, b);\n  if (!range) return 0;\n  const sector = max === r ? (g - b) / range : max === g ? (b - r) / range + 2 : (r - g) / range + 4;\n  return (sector * 60 + 360) % 360;\n}\n\nfunction toHsv(hex: string): Hsv | null {\n  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());\n  if (!match) return null;\n  const digits = match[1].length === 3 ? [...match[1]].map((c) => c + c).join('') : match[1];\n  const [r, g, b] = [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16) / 255);\n  const max = Math.max(r, g, b);\n  return { h: hueOf(r, g, b), s: max ? (max - Math.min(r, g, b)) / max : 0, v: max };\n}\n\nfunction toHex({ h, s, v }: Hsv): string {\n  const channel = (n: number) => {\n    const k = (n + h / 60) % 6;\n    return v - v * s * Math.max(0, Math.min(k, 4 - k, 1));\n  };\n  return '#' + [5, 3, 1].map((n) => Math.round(channel(n) * 255).toString(16).padStart(2, '0')).join('');\n}\n\n// Area keys as [saturation, brightness] steps of 1%; Shift takes ten of them.\n// Home and End overshoot so the clamp lands on the ends of saturation.\nconst KEY_STEPS: Record<string, [number, number]> = {\n  ArrowRight: [1, 0],\n  ArrowLeft: [-1, 0],\n  ArrowUp: [0, 1],\n  ArrowDown: [0, -1],\n  PageUp: [0, 10],\n  PageDown: [0, -10],\n  Home: [-100, 0],\n  End: [100, 0]\n};\n\n/**\n * Color picker. Enhances a `.color-picker` holding an `<input type=\"color\">`\n * with a saturation and brightness area, a hue slider and a hex field. The\n * native input stays the form value and the preview, so the browser's own\n * picker still opens from it, and it fires `input` and `change` as it would\n * if the person had used that picker.\n */\nexport class ColorPicker extends Component<ColorPickerOptions> {\n  /** The native color input that holds the value. */\n  input: HTMLInputElement | null;\n  private _hsv: Hsv = { h: 0, s: 0, v: 0 };\n  private _area: HTMLDivElement | null = null;\n  private _thumb: HTMLDivElement | null = null;\n  private _hue: HTMLInputElement | null = null;\n  private _hex: HTMLInputElement | null = null;\n  // Set while the picker writes the native input, so its own events are not\n  // read back as an outside change.\n  private _writing = false;\n\n  constructor(el: HTMLElement, options: Partial<ColorPickerOptions>) {\n    super(el, options);\n    this.input = el.querySelector<HTMLInputElement>(':scope > input[type=\"color\"]');\n    if (!this.input) return;\n    this._hsv = toHsv(this.input.value) ?? this._hsv;\n    this._build();\n    this.input.addEventListener('input', this._onNativeInput, { signal: this._events.signal });\n    // A form reset restores the native value without an input event.\n    afterFormReset(this.input, this._onNativeInput, this._events.signal);\n    this._render();\n  }\n\n  static get defaults(): ColorPickerOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_ColorPicker';\n\n  destroy() {\n    for (const part of [this._area, this._hue, this._hex]) part?.remove();\n    this._area = this._thumb = this._hue = this._hex = null;\n    this.el.style.removeProperty('--_color-picker-hue');\n    super.destroy();\n  }\n\n  /** The current color as `#rrggbb`. Setting it fires no events, as with a native input. */\n  get value(): string {\n    return this.input?.value ?? '';\n  }\n\n  set value(hex: string) {\n    const hsv = toHsv(hex);\n    if (!hsv || !this.input) return;\n    this._hsv = hsv;\n    this._writing = true;\n    this.input.value = toHex(hsv);\n    this._writing = false;\n    this._render();\n  }\n\n  private _build() {\n    const disabled = this.input!.disabled;\n    const { i18n } = this.options;\n\n    const area = document.createElement('div');\n    area.className = 'color-picker-area';\n    const thumb = document.createElement('div');\n    thumb.className = 'color-picker-thumb';\n    thumb.setAttribute('role', 'slider');\n    thumb.setAttribute('aria-label', i18n.area!);\n    thumb.setAttribute('aria-valuemin', '0');\n    thumb.setAttribute('aria-valuemax', '100');\n    thumb.tabIndex = disabled ? -1 : 0;\n    if (disabled) thumb.setAttribute('aria-disabled', 'true');\n    area.append(thumb);\n\n    const hue = document.createElement('input');\n    hue.type = 'range';\n    hue.className = 'color-picker-hue';\n    hue.min = '0';\n    hue.max = '359';\n    hue.setAttribute('aria-label', i18n.hue!);\n    hue.disabled = disabled;\n\n    const hex = document.createElement('input');\n    hex.type = 'text';\n    hex.className = 'color-picker-hex';\n    hex.setAttribute('aria-label', i18n.hex!);\n    hex.autocomplete = 'off';\n    hex.spellcheck = false;\n    hex.maxLength = 7;\n    hex.disabled = disabled;\n\n    // Area and hue before the native input, the hex field after it.\n    this.input!.before(area, hue);\n    this.input!.after(hex);\n    this._area = area;\n    this._thumb = thumb;\n    this._hue = hue;\n    this._hex = hex;\n\n    area.addEventListener('pointerdown', this._onPointerDown);\n    thumb.addEventListener('keydown', this._onKeyDown);\n    hue.addEventListener('input', () => this._set({ ...this._hsv, h: Number(hue.value) }, false));\n    hue.addEventListener('change', () => this._commit());\n    hex.addEventListener('change', this._onHex);\n    hex.addEventListener('keydown', (e) => {\n      // Enter in a text field would submit the form; take it as \"apply\".\n      if (e.key === 'Enter' && !Utils.isComposing(e)) {\n        e.preventDefault();\n        this._onHex();\n      }\n    });\n  }\n\n  private _render() {\n    const { h, s, v } = this._hsv;\n    const hex = toHex(this._hsv);\n    const thumb = this._thumb!;\n    this.el.style.setProperty('--_color-picker-hue', String(Math.round(h)));\n    thumb.style.setProperty('--_color-picker-x', String(s));\n    thumb.style.setProperty('--_color-picker-y', String(1 - v));\n    thumb.style.setProperty('--_color-picker-color', hex);\n    thumb.setAttribute('aria-valuenow', String(Math.round(s * 100)));\n    thumb.setAttribute('aria-valuetext', this.options.i18n.value!(Math.round(s * 100), Math.round(v * 100)));\n    this._hue!.value = String(Math.round(h));\n    // The hex field only commits on change, so rewriting it never fights typing.\n    this._hex!.value = hex;\n  }\n\n  // Store the color, write it to the native input and fire `input`; with\n  // `commit`, also fire `change` and onChange.\n  // Only reached from the built controls, which a disabled input disables.\n  private _set(hsv: Hsv, commit = true) {\n    const input = this.input!;\n    this._hsv = hsv;\n    const hex = toHex(hsv);\n    const changed = input.value !== hex;\n    this._writing = true;\n    input.value = hex;\n    if (changed) input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n    this._writing = false;\n    this._render();\n    if (commit) this._commit();\n  }\n\n  private _commit() {\n    if (!this.input) return;\n    this._writing = true;\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n    this._writing = false;\n    this.options.onChange?.(this.input.value);\n  }\n\n  // The person used the browser's own picker on the native input.\n  private _onNativeInput = () => {\n    if (this._writing || !this.input) return;\n    const hsv = toHsv(this.input.value);\n    if (!hsv) return;\n    this._hsv = hsv;\n    this._render();\n  };\n\n  private _onHex = () => {\n    const hsv = toHsv(this._hex!.value);\n    if (hsv && toHex(hsv) !== this.input!.value) this._set(hsv);\n    // An invalid entry goes back to the current color.\n    this._hex!.value = toHex(this._hsv);\n  };\n\n  private _fromPoint(e: PointerEvent, commit: boolean) {\n    const box = this._area!.getBoundingClientRect();\n    const s = clamp((e.clientX - box.left) / box.width);\n    const v = 1 - clamp((e.clientY - box.top) / box.height);\n    this._set({ ...this._hsv, s, v }, commit);\n  }\n\n  private _onPointerDown = (e: PointerEvent) => {\n    if (e.button || this.input!.disabled) return;\n    const area = this._area!;\n    e.preventDefault();\n    this._thumb!.focus();\n    area.setPointerCapture(e.pointerId);\n    this._fromPoint(e, false);\n    const move = (ev: PointerEvent) => this._fromPoint(ev, false);\n    const drag = controllerFor(area);\n    const up = (ev: PointerEvent) => {\n      drag.abort();\n      this._fromPoint(ev, true);\n    };\n    const { signal } = drag;\n    area.addEventListener('pointermove', move, { signal });\n    area.addEventListener('pointerup', up, { signal });\n    area.addEventListener('pointercancel', up, { signal });\n  };\n\n  // Left and right change saturation, up and down brightness; see KEY_STEPS.\n  private _onKeyDown = (e: KeyboardEvent) => {\n    const steps = this._keySteps(e);\n    if (!steps) return;\n    e.preventDefault();\n    const unit = e.shiftKey ? 0.1 : 0.01;\n    const { s, v } = this._hsv;\n    this._set({ ...this._hsv, s: clamp(s + steps[0] * unit), v: clamp(v + steps[1] * unit) });\n  };\n\n  /** How a key moves the point. Shift is the larger step; Alt, Ctrl and Meta stay the browser's. */\n  private _keySteps(e: KeyboardEvent) {\n    return Utils.plainKey(e) && !this.input!.disabled ? KEY_STEPS[e.key] : undefined;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,81 @@
+import {
+  Utils
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/plugins/dockedDisplayPlugin.ts
+var _defaults = {
+  margin: 5,
+  transition: 10,
+  duration: 250,
+  align: "left"
+};
+var DockedDisplayPlugin = class {
+  constructor(el, container, options) {
+    this._handleDocumentClick = (e) => {
+      if (!this.visible) return;
+      const path = e.composedPath();
+      if (![...this.triggers, this.container].some((inside) => path.includes(inside))) this.hide();
+    };
+    /**
+     * Tears the plugin down. While shown, the document listener holds a
+     * reference to this instance - and through it the whole picker subtree - so
+     * the owning component must call this from its own destroy().
+     */
+    this.destroy = () => {
+      document.removeEventListener("click", this._handleDocumentClick);
+      this.container.remove();
+    };
+    this.show = () => {
+      if (this.visible) return;
+      this.visible = true;
+      document.addEventListener("click", this._handleDocumentClick);
+      this._place();
+      this.container.style.visibility = "visible";
+      this._animate(this.options.transition, "1");
+    };
+    this.hide = () => {
+      if (!this.visible) return;
+      this.visible = false;
+      document.removeEventListener("click", this._handleDocumentClick);
+      this.container.removeAttribute("style");
+      this._animate(0, "0");
+    };
+    this.el = el;
+    this.triggers = [el];
+    this.options = {
+      ..._defaults,
+      ...options
+    };
+    this.container = document.createElement("div");
+    this.container.classList.add("display-docked");
+    this.container.append(container);
+    el.parentElement.append(this.container);
+  }
+  /** Eases the container to `y` pixels down and to `opacity`. */
+  _animate(y, opacity) {
+    const { duration } = this.options;
+    this.container.style.transition = `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`;
+    setTimeout(() => {
+      this.container.style.transform = `translateX(0px) translateY(${y}px)`;
+      this.container.style.opacity = opacity;
+    }, 1);
+  }
+  /** Places the container below the element, kept on screen. */
+  _place() {
+    const { margin, transition, align } = this.options;
+    const { offsetHeight, offsetWidth } = this.el;
+    const width = this.container.offsetWidth;
+    const rect = this.el.getBoundingClientRect();
+    let left = rect.left + window.scrollX;
+    if (align === "center") left += offsetWidth / 2 - width / 2;
+    else if (align === "right") left += offsetWidth - width - margin;
+    const top = rect.top + window.scrollY + offsetHeight + margin;
+    const coordinates = Utils._repositionWithinScreen(left, top, width, this.container.offsetHeight, margin, transition, align);
+    Utils._placeInOffsetParent(this.container, coordinates);
+  }
+};
+
+export {
+  DockedDisplayPlugin
+};
+//# sourceMappingURL=chunk-CY2CTOVM.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/plugins/dockedDisplayPlugin.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\nexport interface DockedDisplayPluginOptions {\n  /**\n   * Margin between element and docked container\n   */\n  margin: number,\n  /**\n   * Transition movement\n   */\n  transition: number,\n  /**\n   * Transition duration\n   */\n  duration: number,\n  /**\n   * The alignment of the docked container\n   */\n  align: string\n}\n\nconst _defaults: DockedDisplayPluginOptions = {\n  margin: 5,\n  transition: 10,\n  duration: 250,\n  align: 'left'\n}\n\nexport class DockedDisplayPlugin {\n  private readonly el: HTMLElement;\n  private readonly container: HTMLDivElement;\n  private options: Partial<DockedDisplayPluginOptions>;\n  private visible: boolean;\n  /**\n   * Elements whose clicks count as inside, beside the container: the element\n   * the container docks to, and any other control that opens it, such as a\n   * date range's end input. A click on one of those must not close it.\n   */\n  readonly triggers: HTMLElement[];\n\n  constructor(el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>) {\n    this.el = el;\n    this.triggers = [el];\n    this.options = {\n      ..._defaults,\n      ...options\n    };\n\n    this.container = document.createElement('div');\n    this.container.classList.add('display-docked');\n    this.container.append(container);\n    el.parentElement.append(this.container);\n  }\n\n  private _handleDocumentClick = (e: MouseEvent) => {\n    if (!this.visible) return;\n    const path = e.composedPath();\n    if (![...this.triggers, this.container].some((inside) => path.includes(inside))) this.hide();\n  };\n\n  /** Eases the container to `y` pixels down and to `opacity`. */\n  private _animate(y: number, opacity: string) {\n    const { duration } = this.options;\n    this.container.style.transition = `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`;\n    setTimeout(() => {\n      this.container.style.transform = `translateX(0px) translateY(${y}px)`;\n      this.container.style.opacity = opacity;\n    }, 1);\n  }\n\n  /** Places the container below the element, kept on screen. */\n  private _place() {\n    const { margin, transition, align } = this.options;\n    const { offsetHeight, offsetWidth } = this.el;\n    const width = this.container.offsetWidth;\n    const rect = this.el.getBoundingClientRect();\n    let left = rect.left + window.scrollX;\n    if (align === 'center') left += offsetWidth / 2 - width / 2;\n    else if (align === 'right') left += offsetWidth - width - margin;\n    const top = rect.top + window.scrollY + offsetHeight + margin;\n    const coordinates = Utils._repositionWithinScreen(left, top, width, this.container.offsetHeight, margin, transition, align);\n    Utils._placeInOffsetParent(this.container, coordinates);\n  }\n\n  /**\n   * Tears the plugin down. While shown, the document listener holds a\n   * reference to this instance - and through it the whole picker subtree - so\n   * the owning component must call this from its own destroy().\n   */\n  destroy = () => {\n    document.removeEventListener('click', this._handleDocumentClick);\n    this.container.remove();\n  };\n\n  show = () => {\n    if (this.visible) return;\n    this.visible = true;\n    document.addEventListener('click', this._handleDocumentClick);\n    this._place();\n    this.container.style.visibility = 'visible';\n    this._animate(this.options.transition, '1');\n  };\n\n  hide = () => {\n    if (!this.visible) return;\n    this.visible = false;\n    document.removeEventListener('click', this._handleDocumentClick);\n    this.container.removeAttribute('style');\n    this._animate(0, '0');\n  };\n}\n"],
+  "mappings": ";;;;;AAqBA,IAAM,YAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AACT;AAEO,IAAM,sBAAN,MAA0B;AAAA,EAY/B,YAAY,IAAiB,WAAwB,SAA8C;AAcnG,SAAQ,uBAAuB,CAAC,MAAkB;AAChD,UAAI,CAAC,KAAK,QAAS;AACnB,YAAM,OAAO,EAAE,aAAa;AAC5B,UAAI,CAAC,CAAC,GAAG,KAAK,UAAU,KAAK,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,MAAM,CAAC,EAAG,MAAK,KAAK;AAAA,IAC7F;AA+BA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAU,MAAM;AACd,eAAS,oBAAoB,SAAS,KAAK,oBAAoB;AAC/D,WAAK,UAAU,OAAO;AAAA,IACxB;AAEA,gBAAO,MAAM;AACX,UAAI,KAAK,QAAS;AAClB,WAAK,UAAU;AACf,eAAS,iBAAiB,SAAS,KAAK,oBAAoB;AAC5D,WAAK,OAAO;AACZ,WAAK,UAAU,MAAM,aAAa;AAClC,WAAK,SAAS,KAAK,QAAQ,YAAY,GAAG;AAAA,IAC5C;AAEA,gBAAO,MAAM;AACX,UAAI,CAAC,KAAK,QAAS;AACnB,WAAK,UAAU;AACf,eAAS,oBAAoB,SAAS,KAAK,oBAAoB;AAC/D,WAAK,UAAU,gBAAgB,OAAO;AACtC,WAAK,SAAS,GAAG,GAAG;AAAA,IACtB;AApEE,SAAK,KAAK;AACV,SAAK,WAAW,CAAC,EAAE;AACnB,SAAK,UAAU;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAEA,SAAK,YAAY,SAAS,cAAc,KAAK;AAC7C,SAAK,UAAU,UAAU,IAAI,gBAAgB;AAC7C,SAAK,UAAU,OAAO,SAAS;AAC/B,OAAG,cAAc,OAAO,KAAK,SAAS;AAAA,EACxC;AAAA;AAAA,EASQ,SAAS,GAAW,SAAiB;AAC3C,UAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,SAAK,UAAU,MAAM,aAAa,aAAa,QAAQ,wBAAwB,QAAQ;AACvF,eAAW,MAAM;AACf,WAAK,UAAU,MAAM,YAAY,8BAA8B,CAAC;AAChE,WAAK,UAAU,MAAM,UAAU;AAAA,IACjC,GAAG,CAAC;AAAA,EACN;AAAA;AAAA,EAGQ,SAAS;AACf,UAAM,EAAE,QAAQ,YAAY,MAAM,IAAI,KAAK;AAC3C,UAAM,EAAE,cAAc,YAAY,IAAI,KAAK;AAC3C,UAAM,QAAQ,KAAK,UAAU;AAC7B,UAAM,OAAO,KAAK,GAAG,sBAAsB;AAC3C,QAAI,OAAO,KAAK,OAAO,OAAO;AAC9B,QAAI,UAAU,SAAU,SAAQ,cAAc,IAAI,QAAQ;AAAA,aACjD,UAAU,QAAS,SAAQ,cAAc,QAAQ;AAC1D,UAAM,MAAM,KAAK,MAAM,OAAO,UAAU,eAAe;AACvD,UAAM,cAAc,MAAM,wBAAwB,MAAM,KAAK,OAAO,KAAK,UAAU,cAAc,QAAQ,YAAY,KAAK;AAC1H,UAAM,qBAAqB,KAAK,WAAW,WAAW;AAAA,EACxD;AA4BF;",
+  "names": []
+}