@vertexvis/ui 0.1.5-testing.0 → 1.0.0-testing.0

package/dist/components/result-list.js

@@ -1,565 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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 };