@utrecht/web-component-library-stencil 1.0.0-alpha.32 → 1.0.0-alpha.320

package/dist/collection/navigatie sidenav/web-component/index.css

@@ -0,0 +1,189 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-sidenav {
+  --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
+  --utrecht-sidenav-connection-inline-size: 2px;
+  --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
+  --utrecht-sidenav-marker-offset: 26px;
+  --utrecht-sidenav-connection-block-size: 100%;
+  --utrecht-sidenav-marker-height: 8px;
+  --utrecht-sidenav-marker-outline-width: 2px;
+  border-block-end: 1px solid var(--utrecht-color-grey-80);
+  border-block-start: 1px solid var(--utrecht-color-grey-80);
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  width: 19rem;
+}
+
+.utrecht-sidenav__list {
+  margin-block-end: 0;
+  margin-block-start: 0.2rem;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-start: 0;
+}
+
+.utrecht-sidenav__list--child {
+  margin-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 1.4rem;
+}
+
+.utrecht-sidenav__item {
+  list-style: none;
+  margin-inline-start: 0;
+  position: relative;
+}
+
+.utrecht-sidenav__item--current {
+  color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
+}
+
+.utrecht-sidenav__item--last {
+  border-block-end: none;
+}
+
+/* draw the li item box bottom line */
+.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
+  /* .utrecht-sidenav__item--parent span */
+  border-block-end: 1px solid var(--utrecht-color-grey-80);
+  display: block;
+  margin-inline-start: var(--utrecht-space-inline-lg);
+}
+
+.utrecht-sidenav__link {
+  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
+  display: block;
+  margin-inline-start: 0;
+  padding-block-end: var(--utrecht-space-block-xs);
+  padding-block-start: var(--utrecht-space-block-xs);
+  padding-inline-end: var(--utrecht-space-inline-3xs);
+  padding-inline-start: var(--utrecht-space-inline-lg);
+  text-decoration: none;
+}
+
+.utrecht-sidenav__link:hover {
+  color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
+  text-decoration: underline;
+}
+
+.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+/* Remove bottom padding form first item in list with children */
+.utrecht-sidenav__link--parent {
+  padding-block-end: 0;
+}
+
+/* Draw metro connection lines on sidenav link items */
+.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--parent):not(.utrecht-sidenav__link--child)::after {
+  background: var(--utrecht-sidenav-connection-color);
+  bottom: 0;
+  content: "";
+  display: block;
+  height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
+  left: 3px;
+  overflow: hidden;
+  position: absolute;
+  top: calc(var(--utrecht-sidenav-marker-offset));
+  width: var(--utrecht-sidenav-connection-inline-size);
+  z-index: 5;
+}
+
+.utrecht-sidenav__connection--last,
+.utrecht-sidenav__connection--parent,
+.utrecht-sidenav__connection--sibling {
+  display: none;
+}
+
+/* Dot for link with siblings */
+/* Little fix to move the dot to the right */
+.utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
+  background-color: var(--utrecht-sidenav-item-marker-color);
+  border-radius: 100%;
+  content: "";
+  height: var(--utrecht-sidenav-marker-height);
+  left: var(--utrecht-sidenav-marker-offset);
+  overflow: hidden;
+  position: absolute;
+  top: 20px;
+  /* Hard value? */
+  transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
+  width: 8px;
+  z-index: 10;
+}
+
+/* Add dot bullets on child links */
+.utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
+  background-color: transparent;
+  border: 2px solid var(--utrecht-sidenav-link-color);
+  height: 4px;
+  left: 1.2rem;
+  top: 16px;
+  transform: translateY(-50%) translateX(-19.5px);
+  width: 4px;
+}
+
+/* selector must override .utrecht-sidenav__marker--child */
+.utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
+.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
+  background-color: var(--utrecht-sidenav-marker-current-color);
+}
+
+.utrecht-sidenav__link--child,
+.utrecht-sidenav__link--current-child {
+  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: var(--utrecht-space-block-2xs);
+  padding-block-start: var(--utrecht-space-block-2xs);
+  padding-inline-end: var(--utrecht-space-inline-3xs);
+  padding-inline-start: var(--utrecht-space-inline-lg);
+  text-decoration: none;
+}
+
+.utrecht-sidenav__link--current,
+.utrecht-sidenav__link--current-child {
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+}
+
+/* Hover layout for mousover on sidenav__link */
+.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before {
+  background-color: var(--utrecht-sidenav-link-hover-color);
+}
+
+/* Hover layout for mousover on child__link */
+.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before {
+  background-color: var(--utrecht-sidenav-link-hover-color);
+  border: 2px solid var(--utrecht-sidenav-link-hover-color);
+}
+
+.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
+  display: none;
+}
+
+.utrecht-sidenav__link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}

package/dist/collection/navigatie sidenav/web-component/index.stencil.js

@@ -0,0 +1,50 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class Sidenav {
+  render() {
+    const items = JSON.parse(this.json);
+    return (h("nav", { class: "utrecht-sidenav" },
+      h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (h("li", { key: href, class: clsx('utrecht-sidenav__item', index + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--parent') },
+        h("a", { class: clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--parent'), href: href },
+          h("div", { class: clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }),
+          h("div", { class: clsx('utrecht-sidenav__connection', haschildren && 'utrecht-sidenav__connection--parent', sibling && 'utrecht-sidenav__connection--sibling', index + 1 === array.length && 'utrecht-sidenav__connection--last') }),
+          title),
+        children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" },
+          h("a", { class: clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href },
+            h("div", { class: clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }),
+            title)))))) : (''),
+        h("div", { class: "utrecht-sidenav__item-separator" })))))));
+  }
+  static get is() { return "utrecht-sidenav"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+  static get properties() { return {
+    "json": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "json",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/node_modules/@babel/core/lib/config/cache-contexts.js

@@ -0,0 +1 @@
+0 && 0;

package/dist/collection/node_modules/@babel/core/lib/config/caching.js

@@ -0,0 +1,326 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assertSimpleType = assertSimpleType;
+exports.makeStrongCache = makeStrongCache;
+exports.makeStrongCacheSync = makeStrongCacheSync;
+exports.makeWeakCache = makeWeakCache;
+exports.makeWeakCacheSync = makeWeakCacheSync;
+
+function _gensync() {
+  const data = require("gensync");
+
+  _gensync = function () {
+    return data;
+  };
+
+  return data;
+}
+
+var _async = require("../gensync-utils/async");
+
+var _util = require("./util");
+
+const synchronize = gen => {
+  return _gensync()(gen).sync;
+};
+
+function* genTrue() {
+  return true;
+}
+
+function makeWeakCache(handler) {
+  return makeCachedFunction(WeakMap, handler);
+}
+
+function makeWeakCacheSync(handler) {
+  return synchronize(makeWeakCache(handler));
+}
+
+function makeStrongCache(handler) {
+  return makeCachedFunction(Map, handler);
+}
+
+function makeStrongCacheSync(handler) {
+  return synchronize(makeStrongCache(handler));
+}
+
+function makeCachedFunction(CallCache, handler) {
+  const callCacheSync = new CallCache();
+  const callCacheAsync = new CallCache();
+  const futureCache = new CallCache();
+  return function* cachedFunction(arg, data) {
+    const asyncContext = yield* (0, _async.isAsync)();
+    const callCache = asyncContext ? callCacheAsync : callCacheSync;
+    const cached = yield* getCachedValueOrWait(asyncContext, callCache, futureCache, arg, data);
+    if (cached.valid) return cached.value;
+    const cache = new CacheConfigurator(data);
+    const handlerResult = handler(arg, cache);
+    let finishLock;
+    let value;
+
+    if ((0, _util.isIterableIterator)(handlerResult)) {
+      value = yield* (0, _async.onFirstPause)(handlerResult, () => {
+        finishLock = setupAsyncLocks(cache, futureCache, arg);
+      });
+    } else {
+      value = handlerResult;
+    }
+
+    updateFunctionCache(callCache, cache, arg, value);
+
+    if (finishLock) {
+      futureCache.delete(arg);
+      finishLock.release(value);
+    }
+
+    return value;
+  };
+}
+
+function* getCachedValue(cache, arg, data) {
+  const cachedValue = cache.get(arg);
+
+  if (cachedValue) {
+    for (const {
+      value,
+      valid
+    } of cachedValue) {
+      if (yield* valid(data)) return {
+        valid: true,
+        value
+      };
+    }
+  }
+
+  return {
+    valid: false,
+    value: null
+  };
+}
+
+function* getCachedValueOrWait(asyncContext, callCache, futureCache, arg, data) {
+  const cached = yield* getCachedValue(callCache, arg, data);
+
+  if (cached.valid) {
+    return cached;
+  }
+
+  if (asyncContext) {
+    const cached = yield* getCachedValue(futureCache, arg, data);
+
+    if (cached.valid) {
+      const value = yield* (0, _async.waitFor)(cached.value.promise);
+      return {
+        valid: true,
+        value
+      };
+    }
+  }
+
+  return {
+    valid: false,
+    value: null
+  };
+}
+
+function setupAsyncLocks(config, futureCache, arg) {
+  const finishLock = new Lock();
+  updateFunctionCache(futureCache, config, arg, finishLock);
+  return finishLock;
+}
+
+function updateFunctionCache(cache, config, arg, value) {
+  if (!config.configured()) config.forever();
+  let cachedValue = cache.get(arg);
+  config.deactivate();
+
+  switch (config.mode()) {
+    case "forever":
+      cachedValue = [{
+        value,
+        valid: genTrue
+      }];
+      cache.set(arg, cachedValue);
+      break;
+
+    case "invalidate":
+      cachedValue = [{
+        value,
+        valid: config.validator()
+      }];
+      cache.set(arg, cachedValue);
+      break;
+
+    case "valid":
+      if (cachedValue) {
+        cachedValue.push({
+          value,
+          valid: config.validator()
+        });
+      } else {
+        cachedValue = [{
+          value,
+          valid: config.validator()
+        }];
+        cache.set(arg, cachedValue);
+      }
+
+  }
+}
+
+class CacheConfigurator {
+  constructor(data) {
+    this._active = true;
+    this._never = false;
+    this._forever = false;
+    this._invalidate = false;
+    this._configured = false;
+    this._pairs = [];
+    this._data = void 0;
+    this._data = data;
+  }
+
+  simple() {
+    return makeSimpleConfigurator(this);
+  }
+
+  mode() {
+    if (this._never) return "never";
+    if (this._forever) return "forever";
+    if (this._invalidate) return "invalidate";
+    return "valid";
+  }
+
+  forever() {
+    if (!this._active) {
+      throw new Error("Cannot change caching after evaluation has completed.");
+    }
+
+    if (this._never) {
+      throw new Error("Caching has already been configured with .never()");
+    }
+
+    this._forever = true;
+    this._configured = true;
+  }
+
+  never() {
+    if (!this._active) {
+      throw new Error("Cannot change caching after evaluation has completed.");
+    }
+
+    if (this._forever) {
+      throw new Error("Caching has already been configured with .forever()");
+    }
+
+    this._never = true;
+    this._configured = true;
+  }
+
+  using(handler) {
+    if (!this._active) {
+      throw new Error("Cannot change caching after evaluation has completed.");
+    }
+
+    if (this._never || this._forever) {
+      throw new Error("Caching has already been configured with .never or .forever()");
+    }
+
+    this._configured = true;
+    const key = handler(this._data);
+    const fn = (0, _async.maybeAsync)(handler, `You appear to be using an async cache handler, but Babel has been called synchronously`);
+
+    if ((0, _async.isThenable)(key)) {
+      return key.then(key => {
+        this._pairs.push([key, fn]);
+
+        return key;
+      });
+    }
+
+    this._pairs.push([key, fn]);
+
+    return key;
+  }
+
+  invalidate(handler) {
+    this._invalidate = true;
+    return this.using(handler);
+  }
+
+  validator() {
+    const pairs = this._pairs;
+    return function* (data) {
+      for (const [key, fn] of pairs) {
+        if (key !== (yield* fn(data))) return false;
+      }
+
+      return true;
+    };
+  }
+
+  deactivate() {
+    this._active = false;
+  }
+
+  configured() {
+    return this._configured;
+  }
+
+}
+
+function makeSimpleConfigurator(cache) {
+  function cacheFn(val) {
+    if (typeof val === "boolean") {
+      if (val) cache.forever();else cache.never();
+      return;
+    }
+
+    return cache.using(() => assertSimpleType(val()));
+  }
+
+  cacheFn.forever = () => cache.forever();
+
+  cacheFn.never = () => cache.never();
+
+  cacheFn.using = cb => cache.using(() => assertSimpleType(cb()));
+
+  cacheFn.invalidate = cb => cache.invalidate(() => assertSimpleType(cb()));
+
+  return cacheFn;
+}
+
+function assertSimpleType(value) {
+  if ((0, _async.isThenable)(value)) {
+    throw new Error(`You appear to be using an async cache handler, ` + `which your current version of Babel does not support. ` + `We may add support for this in the future, ` + `but if you're on the most recent version of @babel/core and still ` + `seeing this error, then you'll need to synchronously handle your caching logic.`);
+  }
+
+  if (value != null && typeof value !== "string" && typeof value !== "boolean" && typeof value !== "number") {
+    throw new Error("Cache keys must be either string, boolean, number, null, or undefined.");
+  }
+
+  return value;
+}
+
+class Lock {
+  constructor() {
+    this.released = false;
+    this.promise = void 0;
+    this._resolve = void 0;
+    this.promise = new Promise(resolve => {
+      this._resolve = resolve;
+    });
+  }
+
+  release(value) {
+    this.released = true;
+
+    this._resolve(value);
+  }
+
+}
+
+0 && 0;