@vertexvis/ui 0.1.2-canary.0 → 0.1.2-canary.1

package/dist/components/result-list.js

@@ -0,0 +1,565 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { _ as __assign } from './tslib.es6.js';
+import { d as defineCustomElement$1 } from './popover.js';
+
+class ElementPool {
+  constructor(container, elementFactory, eventHandlerFactory) {
+    this.container = container;
+    this.elementFactory = elementFactory;
+    this.eventHandlerFactory = eventHandlerFactory;
+    this.instanceMap = new Map();
+    this.handlerMap = new Map();
+    this.elements = [];
+  }
+  swapHeadToTail(count) {
+    const sliced = this.elements.splice(0, count);
+    this.elements.splice(this.elements.length, 0, ...sliced);
+    return this.elements.concat();
+  }
+  swapTailToHead(count) {
+    const sliced = this.elements.splice(-count, count);
+    this.elements.splice(0, 0, ...sliced);
+    return this.elements.concat();
+  }
+  updateElements(count) {
+    const diff = count - this.elements.length;
+    if (diff > 0) {
+      for (let i = 0; i < diff; i++) {
+        this.createElement();
+      }
+    }
+    else {
+      for (let i = 0; i < -diff; i++) {
+        this.deleteElement();
+      }
+    }
+    return this.elements.concat();
+  }
+  updateData(f) {
+    this.elements.forEach((el, i) => {
+      const instance = this.instanceMap.get(el);
+      const data = f(i);
+      instance === null || instance === void 0 ? void 0 : instance.bindings.bind(data);
+    });
+  }
+  updateElementFactory(elementFactory) {
+    this.elementFactory = elementFactory;
+    this.updateElements(0);
+  }
+  iterateElements(f) {
+    this.elements.forEach((el, i) => {
+      const instance = this.instanceMap.get(el);
+      if (instance == null) {
+        throw new Error('Binding not found for element.');
+      }
+      f(el, instance.bindings, i);
+    });
+  }
+  createElement() {
+    const instance = this.elementFactory();
+    this.elements.push(instance.element);
+    this.instanceMap.set(instance.element, instance);
+    this.container.append(instance.element);
+    this.addEventListeners(instance.element);
+    return instance;
+  }
+  addEventListeners(element) {
+    var _a;
+    const handlers = (_a = this.eventHandlerFactory) === null || _a === void 0 ? void 0 : _a.call(this, element);
+    handlers === null || handlers === void 0 ? void 0 : handlers.forEach((d) => {
+      element.addEventListener(d.type, d.handler);
+    });
+    this.handlerMap.set(element, handlers !== null && handlers !== void 0 ? handlers : []);
+  }
+  deleteElement() {
+    const element = this.elements.pop();
+    if (element != null) {
+      this.instanceMap.delete(element);
+      element.remove();
+      this.removeEventListeners(element);
+    }
+  }
+  removeEventListeners(element) {
+    var _a;
+    (_a = this.handlerMap.get(element)) === null || _a === void 0 ? void 0 : _a.forEach((d) => {
+      element.removeEventListener(d.type, d.handler);
+    });
+  }
+}
+
+/**
+ * Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
+ */
+/**
+ * Lower case as a function.
+ */
+function lowerCase(str) {
+    return str.toLowerCase();
+}
+
+// Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case").
+var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
+// Remove all non-word characters.
+var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
+/**
+ * Normalize the string into something other libraries can manipulate easier.
+ */
+function noCase(input, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
+    var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
+    var start = 0;
+    var end = result.length;
+    // Trim the delimiter from around the output string.
+    while (result.charAt(start) === "\0")
+        start++;
+    while (result.charAt(end - 1) === "\0")
+        end--;
+    // Transform each token independently.
+    return result.slice(start, end).split("\0").map(transform).join(delimiter);
+}
+/**
+ * Replace `re` in the input string with the replacement value.
+ */
+function replace(input, re, value) {
+    if (re instanceof RegExp)
+        return input.replace(re, value);
+    return re.reduce(function (input, re) { return input.replace(re, value); }, input);
+}
+
+function pascalCaseTransform(input, index) {
+    var firstChar = input.charAt(0);
+    var lowerChars = input.substr(1).toLowerCase();
+    if (index > 0 && firstChar >= "0" && firstChar <= "9") {
+        return "_" + firstChar + lowerChars;
+    }
+    return "" + firstChar.toUpperCase() + lowerChars;
+}
+function pascalCase(input, options) {
+    if (options === void 0) { options = {}; }
+    return noCase(input, __assign({ delimiter: "", transform: pascalCaseTransform }, options));
+}
+
+function camelCaseTransform(input, index) {
+    if (index === 0)
+        return input.toLowerCase();
+    return pascalCaseTransform(input, index);
+}
+function camelCase(input, options) {
+    if (options === void 0) { options = {}; }
+    return pascalCase(input, __assign({ transform: camelCaseTransform }, options));
+}
+
+const bindingRegEx = /{{(.+)}}/;
+class CollectionBinding {
+  constructor(bindings) {
+    this.bindings = bindings;
+  }
+  bind(data) {
+    this.bindings.forEach((binding) => binding.bind(data));
+  }
+}
+class NodeBinding {
+  constructor(node, expr) {
+    this.node = node;
+    this.expr = expr;
+  }
+}
+class TextNodeBinding extends NodeBinding {
+  constructor(node, expr) {
+    super(node, expr);
+  }
+  bind(data) {
+    const newContent = replaceBindingString(data, this.expr);
+    if (newContent !== this.node.textContent) {
+      this.node.textContent = newContent;
+    }
+  }
+}
+class AttributeBinding extends NodeBinding {
+  constructor(node, expr, attr) {
+    super(node, expr);
+    this.attr = attr;
+  }
+  bind(data) {
+    const newValue = replaceBindingString(data, this.expr);
+    const oldValue = this.node.getAttribute(this.attr);
+    if (oldValue !== newValue) {
+      this.node.setAttribute(this.attr, newValue);
+    }
+  }
+}
+class PropertyBinding extends NodeBinding {
+  constructor(node, expr, prop) {
+    super(node, expr);
+    this.prop = prop;
+  }
+  bind(data) {
+    const newValue = replaceBinding(data, this.expr);
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    const oldValue = this.node[this.prop];
+    if (oldValue !== newValue) {
+      this.node[this.prop] = newValue;
+    }
+    /* eslint-enable @typescript-eslint/no-explicit-any */
+  }
+}
+class EventHandlerBinding extends NodeBinding {
+  constructor(node, expr, eventName) {
+    super(node, expr);
+    this.eventName = eventName;
+  }
+  bind(data) {
+    var _a;
+    const path = extractBindingPath(this.expr);
+    if (path != null) {
+      (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
+      const listener = getBindableValue(data, path, true);
+      this.node.addEventListener(this.eventName, listener);
+      this.disposable = {
+        dispose: () => {
+          this.node.removeEventListener(this.eventName, listener);
+        },
+      };
+    }
+  }
+}
+function generateBindings(node) {
+  const bindings = [];
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node;
+    const bindableAttributes = getBindableAttributes(el);
+    bindableAttributes.forEach((attr) => {
+      if (attr.name.startsWith('event:')) {
+        const eventName = camelCase(attr.name.replace('event:', ''));
+        bindings.push(new EventHandlerBinding(el, attr.value, eventName));
+      }
+      else if (attr.name.startsWith('attr:')) {
+        bindings.push(new AttributeBinding(el, attr.value, attr.name.replace('attr:', '')));
+      }
+      else if (attr.name.startsWith('prop:')) {
+        const propName = camelCase(attr.name.replace('prop:', ''));
+        bindings.push(new PropertyBinding(el, attr.value, propName));
+      }
+    });
+  }
+  else if (node.nodeType === Node.TEXT_NODE &&
+    node.textContent != null &&
+    bindingRegEx.test(node.textContent)) {
+    bindings.push(new TextNodeBinding(node, node.textContent));
+  }
+  for (let i = 0; i < node.childNodes.length; i++) {
+    bindings.push(...generateBindings(node.childNodes[i]));
+  }
+  return bindings;
+}
+function getBindableAttributes(element) {
+  return Array.from(element.attributes).filter((attr) => bindingRegEx.test(attr.value));
+}
+function extractBindingPath(expr) {
+  const result = bindingRegEx.exec(expr);
+  return result != null ? result[1] : undefined;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function replaceBindingString(data, expr) {
+  const path = extractBindingPath(expr);
+  if (path != null) {
+    const value = getBindableValue(data, path, true);
+    return expr.replace(`{{${path}}}`, value === null || value === void 0 ? void 0 : value.toString());
+  }
+  else {
+    return expr;
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function replaceBinding(data, expr) {
+  const path = extractBindingPath(expr);
+  if (path != null) {
+    const value = getBindableValue(data, path, true);
+    return value;
+  }
+  else {
+    return expr;
+  }
+}
+function getBindableValue(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+data, path, isHead = false
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
+  const [head, ...tail] = path.split('.');
+  if (isHead && tail.length === 0) {
+    return data;
+  }
+  else if (isHead && tail.length > 0) {
+    return getBindableValue(data, tail.join('.'), false);
+  }
+  else {
+    const value = data[head];
+    if (tail.length > 0) {
+      return getBindableValue(value, tail.join('.'), false);
+    }
+    else {
+      return value;
+    }
+  }
+}
+
+function generateInstanceFromTemplate(template) {
+  const fragment = template.content.cloneNode(true);
+  const element = fragment.firstElementChild;
+  const bindings = new CollectionBinding(generateBindings(fragment));
+  return { element, bindings };
+}
+
+const getResultListHeight = (el) => {
+  return el.clientHeight;
+};
+const scrollToResult = (el, lastFocusedIndex, resultHeight) => {
+  el === null || el === void 0 ? void 0 : el.scrollTo({
+    top: lastFocusedIndex != null && resultHeight != null
+      ? lastFocusedIndex * resultHeight
+      : 0,
+  });
+};
+
+const resultListCss = ":host{--max-height:300px;--width:500px;--box-shadow:0 2px 5px rgba(0, 0, 0, 0.5)}.hidden{visibility:hidden;position:fixed;pointer-events:none}.results{position:relative;height:100%}.results-scroll{overflow-y:auto;max-height:var(--max-height);width:var(--width);box-shadow:var(--box-shadow);background-color:white}";
+
+const ResultList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.enterPressed = createEvent(this, "enterPressed", 7);
+    this.resultClick = createEvent(this, "resultClick", 7);
+    this.computeResultHeight = () => {
+      if (this.computedResultHeight == null) {
+        const result = this.hostEl.querySelector('*[slot="result"]');
+        if (result != null) {
+          this.resultHeight = result.clientHeight;
+          this.computedResultHeight = result.clientHeight;
+        }
+      }
+    };
+    this.ensureTemplateDefined = () => {
+      const template = this.hostEl.querySelector('template');
+      if (template == null) {
+        const defaultTemplate = document.createElement('template');
+        defaultTemplate.innerHTML = `
+        <div class="result">{{data.value}}</div>
+      `;
+        this.hostEl.appendChild(defaultTemplate);
+        this.stateMap.resultTemplate = defaultTemplate;
+      }
+      else {
+        this.stateMap.resultTemplate = template;
+      }
+    };
+    this.createResultPool = () => {
+      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance(), () => this.createResultHandlers());
+    };
+    this.createResultInstance = () => {
+      if (this.stateMap.resultTemplate != null) {
+        const instance = generateInstanceFromTemplate(this.stateMap.resultTemplate);
+        instance.element.slot = 'result';
+        return instance;
+      }
+      else {
+        throw new Error('Result template not defined.');
+      }
+    };
+    this.createResultHandlers = () => {
+      return [
+        {
+          type: 'pointerdown',
+          handler: this.handlePointerDown,
+        },
+        {
+          type: 'click',
+          handler: this.handleResultClick,
+        },
+      ];
+    };
+    this.layoutResults = () => {
+      var _a, _b, _c, _d;
+      const visibleRowCount = this.viewportEndIndex - this.viewportStartIndex + 1;
+      const diff = this.viewportStartIndex - this.lastStartIndex;
+      this.lastStartIndex = this.viewportStartIndex;
+      (_a = this.stateMap.resultPool) === null || _a === void 0 ? void 0 : _a.updateElements(visibleRowCount);
+      if (diff > 0) {
+        (_b = this.stateMap.resultPool) === null || _b === void 0 ? void 0 : _b.swapHeadToTail(diff);
+      }
+      else {
+        (_c = this.stateMap.resultPool) === null || _c === void 0 ? void 0 : _c.swapTailToHead(-diff);
+      }
+      (_d = this.stateMap.resultPool) === null || _d === void 0 ? void 0 : _d.iterateElements((el, binding, index) => {
+        const result = this.parsedResults[index + this.viewportStartIndex];
+        if (result != null) {
+          el.style.position = 'absolute';
+          el.style.boxSizing = 'border-box';
+          el.style.top = `${(this.viewportStartIndex + index) * this.resultHeight}px`;
+          el.style.width = '100%';
+          el.setAttribute('is-focused', `${this.viewportStartIndex + index === this.lastFocusedIndex}`);
+          el.setAttribute('data-result-id', result.id);
+          binding.bind(result);
+        }
+      });
+    };
+    this.handleScroll = (event) => {
+      this.scrollTop = event.target.scrollTop;
+    };
+    this.handleKeyDown = (event) => {
+      if (this.open) {
+        if (event.key === 'ArrowUp') {
+          event.preventDefault();
+          this.lastFocusedIndex = Math.min(0, this.lastFocusedIndex - 1);
+          scrollToResult(this.resultsScrollEl, this.lastFocusedIndex, this.resultHeight);
+        }
+        else if (event.key === 'ArrowDown') {
+          event.preventDefault();
+          this.lastFocusedIndex = Math.min(this.lastFocusedIndex + 1, this.items.length);
+          scrollToResult(this.resultsScrollEl, this.lastFocusedIndex, this.resultHeight);
+        }
+        if (event.key === 'Enter' && this.lastFocusedIndex != null) {
+          event.preventDefault();
+          this.enterPressed.emit(this.items[this.lastFocusedIndex]);
+          this.lastFocusedIndex = 0;
+          scrollToResult(this.resultsScrollEl);
+        }
+      }
+    };
+    this.items = [];
+    this.itemsJson = undefined;
+    this.viewportStartIndex = 0;
+    this.viewportEndIndex = 0;
+    this.resultHeight = 32;
+    this.overScanCount = 25;
+    this.placement = 'bottom-start';
+    this.position = undefined;
+    this.open = false;
+    this.listHeight = undefined;
+    this.parsedResults = [];
+    this.scrollTop = 0;
+    this.lastStartIndex = 0;
+    this.lastFocusedIndex = 0;
+    this.stateMap = {};
+    this.handleResultClick = this.handleResultClick.bind(this);
+    this.handlePointerDown = this.handlePointerDown.bind(this);
+  }
+  handleResultsChanged(results) {
+    if (typeof results === 'string') {
+      this.parsedResults = JSON.parse(results);
+    }
+    else if (results != null) {
+      this.parsedResults = results;
+    }
+  }
+  handleOpenChanged() {
+    if (!this.open && this.scrollTop !== 0) {
+      scrollToResult(this.resultsScrollEl);
+    }
+  }
+  componentWillLoad() {
+    var _a;
+    this.resizeObserver = new ResizeObserver(() => {
+      this.listHeight = undefined;
+    });
+    window.addEventListener('keydown', this.handleKeyDown);
+    this.ensureTemplateDefined();
+    this.createResultPool();
+    this.handleResultsChanged((_a = this.itemsJson) !== null && _a !== void 0 ? _a : this.items);
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.hostEl);
+  }
+  componentWillRender() {
+    this.computeViewportResults();
+  }
+  componentDidRender() {
+    this.layoutResults();
+    this.computeResultHeight();
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+    window.removeEventListener('keydown', this.handleKeyDown);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classnames('wrapper', {
+        hidden: !this.open || this.computedResultHeight == null,
+      }) }, h("vertex-popover", { position: this.position, placement: this.placement, open: this.open, backdrop: false }, h("div", { class: "results-scroll", ref: (ref) => (this.resultsScrollEl = ref), onScroll: this.handleScroll }, h("div", { class: "results", style: {
+        height: `${this.parsedResults.length * this.resultHeight}px`,
+      } }, h("slot", null), h("slot", { name: "result" })))))));
+  }
+  handlePointerDown(event) {
+    event.preventDefault();
+  }
+  handleResultClick(event) {
+    const closestIdElement = event.target.closest('[data-result-id]');
+    const result = this.parsedResults.find((r) => r.id === (closestIdElement === null || closestIdElement === void 0 ? void 0 : closestIdElement.getAttribute('data-result-id')));
+    if (result != null) {
+      this.resultClick.emit(result);
+    }
+  }
+  computeViewportResults() {
+    const viewportHeight = this.getListHeight();
+    if (viewportHeight != null && this.resultHeight > 0) {
+      const viewportCount = Math.ceil(viewportHeight / this.resultHeight);
+      const viewportStartIndex = Math.floor(this.scrollTop / this.resultHeight);
+      const viewportEndIndex = viewportStartIndex + viewportCount;
+      const startIndex = Math.max(0, viewportStartIndex - this.overScanCount);
+      const endIndex = Math.min(this.parsedResults.length - 1, viewportEndIndex + this.overScanCount);
+      this.viewportStartIndex = startIndex;
+      this.viewportEndIndex = endIndex;
+    }
+  }
+  getListHeight() {
+    if (this.listHeight == null) {
+      this.listHeight = getResultListHeight(this.hostEl);
+    }
+    return this.listHeight;
+  }
+  get hostEl() { return this; }
+  static get watchers() { return {
+    "items": ["handleResultsChanged"],
+    "open": ["handleOpenChanged"]
+  }; }
+  static get style() { return resultListCss; }
+}, [1, "vertex-result-list", {
+    "items": [16],
+    "itemsJson": [1, "items"],
+    "viewportStartIndex": [1026, "viewport-start-index"],
+    "viewportEndIndex": [1026, "viewport-end-index"],
+    "resultHeight": [1026, "result-height"],
+    "overScanCount": [2, "over-scan-count"],
+    "placement": [1],
+    "position": [1],
+    "open": [4],
+    "listHeight": [32],
+    "parsedResults": [32],
+    "scrollTop": [32],
+    "lastStartIndex": [32],
+    "lastFocusedIndex": [32],
+    "stateMap": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["vertex-result-list", "vertex-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "vertex-result-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ResultList);
+      }
+      break;
+    case "vertex-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { ResultList as R, defineCustomElement as d, generateInstanceFromTemplate as g };

package/dist/components/slots.js

@@ -0,0 +1,26 @@
+function getFirstSlottedElement({ hostElement, slotName, selector, }) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  if (selector != null) {
+    return ((_c = (_b = (_a = hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector)) !== null && _b !== void 0 ? _b : hostElement.querySelector(selector)) !== null && _c !== void 0 ? _c : undefined);
+  }
+  else {
+    const slotted = (_e = (_d = hostElement.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector(slotName != null ? `slot[name="${slotName}"]` : 'slot')) !== null && _e !== void 0 ? _e : undefined;
+    if ((_g = (_f = slotted === null || slotted === void 0 ? void 0 : slotted.assignedElements) === null || _f === void 0 ? void 0 : _f.call(slotted).length) !== null && _g !== void 0 ? _g : 0 > 0) {
+      return slotted === null || slotted === void 0 ? void 0 : slotted.assignedElements()[0];
+    }
+  }
+}
+function getSlottedContent(slotOrParentElement) {
+  const slot = isSlotElement(slotOrParentElement)
+    ? slotOrParentElement
+    : slotOrParentElement === null || slotOrParentElement === void 0 ? void 0 : slotOrParentElement.querySelector('slot');
+  if (slot != null) {
+    return slot.assignedElements()[0];
+  }
+  return undefined;
+}
+function isSlotElement(element) {
+  return (element === null || element === void 0 ? void 0 : element.tagName) === 'SLOT';
+}
+
+export { getSlottedContent as a, getFirstSlottedElement as g };