@utrecht/web-component-library-stencil 1.0.0-alpha.21 → 1.0.0-alpha.212

package/dist/collection/node_modules/svgo/plugins/reusePaths.js

@@ -0,0 +1,113 @@
+'use strict';
+
+/**
+ * @typedef {import('../lib/types').XastElement} XastElement
+ * @typedef {import('../lib/types').XastParent} XastParent
+ * @typedef {import('../lib/types').XastNode} XastNode
+ */
+
+const JSAPI = require('../lib/svgo/jsAPI.js');
+
+exports.type = 'visitor';
+exports.name = 'reusePaths';
+exports.active = false;
+exports.description =
+  'Finds <path> elements with the same d, fill, and ' +
+  'stroke, and converts them to <use> elements ' +
+  'referencing a single <path> def.';
+
+/**
+ * Finds <path> elements with the same d, fill, and stroke, and converts them to
+ * <use> elements referencing a single <path> def.
+ *
+ * @author Jacob Howcroft
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  /**
+   * @type {Map<string, Array<XastElement>>}
+   */
+  const paths = new Map();
+
+  return {
+    element: {
+      enter: (node) => {
+        if (node.name === 'path' && node.attributes.d != null) {
+          const d = node.attributes.d;
+          const fill = node.attributes.fill || '';
+          const stroke = node.attributes.stroke || '';
+          const key = d + ';s:' + stroke + ';f:' + fill;
+          let list = paths.get(key);
+          if (list == null) {
+            list = [];
+            paths.set(key, list);
+          }
+          list.push(node);
+        }
+      },
+
+      exit: (node, parentNode) => {
+        if (node.name === 'svg' && parentNode.type === 'root') {
+          /**
+           * @type {XastElement}
+           */
+          const rawDefs = {
+            type: 'element',
+            name: 'defs',
+            attributes: {},
+            children: [],
+          };
+          /**
+           * @type {XastElement}
+           */
+          const defsTag = new JSAPI(rawDefs, node);
+          let index = 0;
+          for (const list of paths.values()) {
+            if (list.length > 1) {
+              // add reusable path to defs
+              /**
+               * @type {XastElement}
+               */
+              const rawPath = {
+                type: 'element',
+                name: 'path',
+                attributes: { ...list[0].attributes },
+                children: [],
+              };
+              delete rawPath.attributes.transform;
+              let id;
+              if (rawPath.attributes.id == null) {
+                id = 'reuse-' + index;
+                index += 1;
+                rawPath.attributes.id = id;
+              } else {
+                id = rawPath.attributes.id;
+                delete list[0].attributes.id;
+              }
+              /**
+               * @type {XastElement}
+               */
+              const reusablePath = new JSAPI(rawPath, defsTag);
+              defsTag.children.push(reusablePath);
+              // convert paths to <use>
+              for (const pathNode of list) {
+                pathNode.name = 'use';
+                pathNode.attributes['xlink:href'] = '#' + id;
+                delete pathNode.attributes.d;
+                delete pathNode.attributes.stroke;
+                delete pathNode.attributes.fill;
+              }
+            }
+          }
+          if (defsTag.children.length !== 0) {
+            if (node.attributes['xmlns:xlink'] == null) {
+              node.attributes['xmlns:xlink'] = 'http://www.w3.org/1999/xlink';
+            }
+            node.children.unshift(defsTag);
+          }
+        }
+      },
+    },
+  };
+};

package/dist/collection/node_modules/svgo/plugins/sortAttrs.js

@@ -0,0 +1,113 @@
+'use strict';
+
+exports.type = 'visitor';
+exports.name = 'sortAttrs';
+exports.active = false;
+exports.description = 'Sort element attributes for better compression';
+
+/**
+ * Sort element attributes for better compression
+ *
+ * @author Nikolay Frantsev
+ *
+ * @type {import('../lib/types').Plugin<{
+ *   order?: Array<string>
+ *   xmlnsOrder?: 'front' | 'alphabetical'
+ * }>}
+ */
+exports.fn = (_root, params) => {
+  const {
+    order = [
+      'id',
+      'width',
+      'height',
+      'x',
+      'x1',
+      'x2',
+      'y',
+      'y1',
+      'y2',
+      'cx',
+      'cy',
+      'r',
+      'fill',
+      'stroke',
+      'marker',
+      'd',
+      'points',
+    ],
+    xmlnsOrder = 'front',
+  } = params;
+
+  /**
+   * @type {(name: string) => number}
+   */
+  const getNsPriority = (name) => {
+    if (xmlnsOrder === 'front') {
+      // put xmlns first
+      if (name === 'xmlns') {
+        return 3;
+      }
+      // xmlns:* attributes second
+      if (name.startsWith('xmlns:')) {
+        return 2;
+      }
+    }
+    // other namespaces after and sort them alphabetically
+    if (name.includes(':')) {
+      return 1;
+    }
+    // other attributes
+    return 0;
+  };
+
+  /**
+   * @type {(a: [string, string], b: [string, string]) => number}
+   */
+  const compareAttrs = ([aName], [bName]) => {
+    // sort namespaces
+    const aPriority = getNsPriority(aName);
+    const bPriority = getNsPriority(bName);
+    const priorityNs = bPriority - aPriority;
+    if (priorityNs !== 0) {
+      return priorityNs;
+    }
+    // extract the first part from attributes
+    // for example "fill" from "fill" and "fill-opacity"
+    const [aPart] = aName.split('-');
+    const [bPart] = bName.split('-');
+    // rely on alphabetical sort when the first part is the same
+    if (aPart !== bPart) {
+      const aInOrderFlag = order.includes(aPart) ? 1 : 0;
+      const bInOrderFlag = order.includes(bPart) ? 1 : 0;
+      // sort by position in order param
+      if (aInOrderFlag === 1 && bInOrderFlag === 1) {
+        return order.indexOf(aPart) - order.indexOf(bPart);
+      }
+      // put attributes from order param before others
+      const priorityOrder = bInOrderFlag - aInOrderFlag;
+      if (priorityOrder !== 0) {
+        return priorityOrder;
+      }
+    }
+    // sort alphabetically
+    return aName < bName ? -1 : 1;
+  };
+
+  return {
+    element: {
+      enter: (node) => {
+        const attrs = Object.entries(node.attributes);
+        attrs.sort(compareAttrs);
+        /**
+         * @type {Record<string, string>}
+         */
+        const sortedAttributes = {};
+        for (const [name, value] of attrs) {
+          sortedAttributes[name] = value;
+        }
+        node.attributes = sortedAttributes;
+      },
+    },
+  };
+};

package/dist/collection/node_modules/svgo/plugins/sortDefsChildren.js

@@ -0,0 +1,60 @@
+'use strict';
+
+exports.type = 'visitor';
+exports.name = 'sortDefsChildren';
+exports.active = true;
+exports.description = 'Sorts children of <defs> to improve compression';
+
+/**
+ * Sorts children of defs in order to improve compression.
+ * Sorted first by frequency then by element name length then by element name (to ensure grouping).
+ *
+ * @author David Leston
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  return {
+    element: {
+      enter: (node) => {
+        if (node.name === 'defs') {
+          /**
+           * @type {Map<string, number>}
+           */
+          const frequencies = new Map();
+          for (const child of node.children) {
+            if (child.type === 'element') {
+              const frequency = frequencies.get(child.name);
+              if (frequency == null) {
+                frequencies.set(child.name, 1);
+              } else {
+                frequencies.set(child.name, frequency + 1);
+              }
+            }
+          }
+          node.children.sort((a, b) => {
+            if (a.type !== 'element' || b.type !== 'element') {
+              return 0;
+            }
+            const aFrequency = frequencies.get(a.name);
+            const bFrequency = frequencies.get(b.name);
+            if (aFrequency != null && bFrequency != null) {
+              const frequencyComparison = bFrequency - aFrequency;
+              if (frequencyComparison !== 0) {
+                return frequencyComparison;
+              }
+            }
+            const lengthComparison = b.name.length - a.name.length;
+            if (lengthComparison !== 0) {
+              return lengthComparison;
+            }
+            if (a.name !== b.name) {
+              return a.name > b.name ? -1 : 1;
+            }
+            return 0;
+          });
+        }
+      },
+    },
+  };
+};

package/dist/collection/ordered-list/css/template.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const OrderedList = ({ distanced = false, items = [] }) =>
+  `<ol class="${clsx('utrecht-ordered-list', distanced && 'utrecht-ordered-list--distanced')}">
+${items.map(({ textContent }) => `  <li class="utrecht-ordered-list__item">${textContent}</li>`).join('\n')}
+</ol>`;

package/dist/collection/ordered-list/html/template.js

@@ -0,0 +1,17 @@
+export const OrderedList = () =>
+  `<section class="utrecht-html">
+  <ol>
+    <li>Lorem</li>
+    <li>Ipsum</li>
+    <li>Dolor</li>
+  </ol>
+</section>`;
+
+export const OrderedListArabic = () =>
+  `<section class="utrecht-html" lang="ar" dir="rtl">
+  <ol>
+    <li>واحد</li>
+    <li>إثنان</li>
+    <li>ثلاثة</li>
+  </ol>
+</section>`;

package/dist/collection/page/css/template.js

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const Page = ({ innerHTML = '' }) => `<div class="utrecht-page">${innerHTML}</div>`;

package/dist/collection/page/web-component/index.css

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-page {
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  max-inline-size: calc(var(--utrecht-page-max-inline-size) - var(--utrecht-page-margin-inline-start, 0px) - var(--utrecht-page-margin-inline-end, 0px));
+  padding-inline-end: var(--utrecht-page-margin-inline-end);
+  padding-inline-start: var(--utrecht-page-margin-inline-start);
+}
+
+.utrecht-page__content {
+  background-color: var(--utrecht-page-background-color);
+  color: var(--utrecht-page-color);
+  max-inline-size: var(--utrecht-page-max-inline-size);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/page/web-component/index.stencil.js

@@ -0,0 +1,20 @@
+import { Component, h } from '@stencil/core';
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export class Page {
+  render() {
+    return (h("div", { class: "utrecht-page" },
+      h("div", { class: "utrecht-page__content" },
+        h("slot", null))));
+  }
+  static get is() { return "utrecht-page"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/page/web-component/template.js

@@ -0,0 +1,5 @@
+export const Page = ({ contentHTML = '', footerHTML = '', headerHTML = '' }) => `<utrecht-page>
+  <utrecht-page-header>${headerHTML}</utrecht-page-header>
+  <utrecht-page-content>${contentHTML}</utrecht-page-content>
+  <utrecht-page-footer>${footerHTML}</utrecht-page-footer>
+</utrecht-page>`;

package/dist/collection/page-content/css/template.js

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const PageContent = ({ asideHTML = null, innerHTML = '', navHTML = null }) => `<div class="utrecht-page-content">
+${navHTML ? `  <nav class="utrecht-page-content__nav">${navHTML}</nav>` : ''}
+  <main class="utrecht-page-content__main">${innerHTML}</main>
+  ${asideHTML ? `<aside class="utrecht-page-content__aside">${asideHTML}</aside>` : ''}
+</div>`;

package/dist/collection/page-content/web-component/index.css

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-page-content {
+  padding-block-end: var(--utrecht-page-content-padding-block-end);
+  padding-block-start: var(--utrecht-page-content-padding-block-start);
+  padding-inline-end: var(--utrecht-page-padding-inline-end);
+  padding-inline-start: var(--utrecht-page-padding-inline-start);
+}
+
+.utrecht-page-content__main {
+  grid-area: main;
+}
+
+.utrecht-page-content__aside {
+  grid-area: aside;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/page-content/web-component/index.stencil.js

@@ -0,0 +1,20 @@
+import { Component, h } from '@stencil/core';
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export class Page {
+  render() {
+    return (h("div", { class: "utrecht-page-content" },
+      h("main", { class: "utrecht-page-content__main" },
+        h("slot", null))));
+  }
+  static get is() { return "utrecht-page-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/page-content/web-component/template.js

@@ -0,0 +1 @@
+export const PageContent = ({ innerHTML = '' }) => `<utrecht-page-content>${innerHTML}</utrecht-page-content>`;

package/dist/collection/page-footer/css/template.js

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const PageFooter = ({ innerHTML = '' }) => `<footer class="utrecht-page-footer">
+${innerHTML}</footer>`;

package/dist/collection/page-footer/{bem.css → web-component/index.css}

@@ -1,20 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
  */
-
 .utrecht-page-footer {
-  font-family: var(--utrecht-document-font-family);
-  font-size: var(--utrecht-document-font-size);
-  background-color: var(--utrecht-page-footer-background-color);
-  background-image: var(--utrecht-page-footer-background-image);
-  color: var(--utrecht-page-footer-color);
-  padding-block-start: var(--utrecht-page-footer-padding-block-start);
-  padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
-  padding-block-end: var(--utrecht-page-footer-padding-block-end);
-  padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
-
   --utrecht-document-color: currentColor;
   --utrecht-heading-color: currentColor;
   --utrecht-link-color: currentColor;
@@ -22,11 +15,36 @@
   --utrecht-link-hover-color: currentColor;
   --utrecht-link-active-color: currentColor;
   --utrecht-link-visited-color: currentColor;
+  background-color: var(--utrecht-page-footer-background-color);
+  background-image: var(--utrecht-page-footer-background-image);
+  color: var(--utrecht-page-footer-color);
+  font-family: var(--utrecht-document-font-family);
+  font-size: var(--utrecht-document-font-size);
+  padding-block-end: var(--utrecht-page-footer-padding-block-end);
+  padding-block-start: var(--utrecht-page-footer-padding-block-start);
+  padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
+  padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
+}
+
+.utrecht-page-footer .utrecht-link--telephone {
+  color: #fff;
+}
+
+.utrecht-page-footer .utrecht-paragraph {
+  color: #fff;
 }
 
 .utrecht-page-footer__address--reset-address {
   /* reset <address> */
   font-style: inherit;
-  margin-block-start: 0;
   margin-block-end: 0;
+  margin-block-start: 0;
+}
+
+:host {
+  display: block;
 }
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/page-footer/{stencil.js → web-component/index.stencil.js}

@@ -1,4 +1,4 @@
-import { Component, h } from "@stencil/core";
+import { Component, h } from '@stencil/core';
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -11,9 +11,9 @@ export class PageFooter {
   static get is() { return "utrecht-page-footer"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/page-footer/web-component/template.js

@@ -0,0 +1 @@
+export const PageFooter = ({ innerHTML = '' }) => `<utrecht-page-footer>${innerHTML}</utrecht-page-footer>`;

package/dist/collection/page-header/css/template.js

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const PageHeader = ({ innerHTML = '' }) => `<header class="utrecht-page-header">${innerHTML}</header>`;

package/dist/collection/page-header/web-component/index.css

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-page-header {
+  background-color: var(--utrecht-page-header-background-color);
+  color: var(--utrecht-page-header-color);
+  grid-area: "utrecht-header";
+  padding-block-end: var(--utrecht-page-header-padding-block-end);
+  padding-block-start: var(--utrecht-page-header-padding-block-start);
+  padding-inline-end: var(--utrecht-page-padding-inline-end);
+  padding-inline-start: var(--utrecht-page-padding-inline-start);
+}
+
+.utrecht-page-header__content {
+  max-inline-size: var(--utrecht-page-max-inline-size);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/page-header/web-component/stencil.js

@@ -0,0 +1,20 @@
+import { Component, h } from '@stencil/core';
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export class PageHeader {
+  render() {
+    return (h("header", { class: "utrecht-page-header" },
+      h("div", { class: "utrecht-page-header__content" },
+        h("slot", null))));
+  }
+  static get is() { return "utrecht-page-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/page-header/web-component/template.js

@@ -0,0 +1 @@
+export const PageHeader = ({ innerHTML = '' }) => `<utrecht-page-header>${innerHTML}</utrecht-page-header>`;

package/dist/collection/pagination/css/template.js

@@ -0,0 +1,54 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  distanced: false,
+};
+
+export const LinkTemplate = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) =>
+  `<${disabled ? 'span' : 'a'} href="${href}" class="${clsx(
+    'utrecht-pagination__relative-link',
+    disabled && 'utrecht-pagination__relative-link--disabled',
+    rel === 'next' && 'utrecht-pagination__relative-link--next',
+    rel === 'prev' && 'utrecht-pagination__relative-link--prev',
+  )}"${rel ? ` rel="${rel}"` : ''}${title ? ` aria-label="${title}"` : ''}>${textContent}</${disabled ? 'span' : 'a'}>`;
+
+export const ItemTemplate = ({ current = false, href = '', rel = null, textContent = '' }) =>
+  `<a class="${clsx(
+    'utrecht-pagination__page-link',
+    current && 'utrecht-pagination__page-link--current',
+  )}" href="${href}"${current ? ' aria-current="true"' : ''}${rel ? ` rel="${rel}"` : ''}>${textContent}</a>`;
+
+export const Pagination = ({ currentIndex = -1, distanced = false, links = [], next = null, prev = null }) =>
+  `<nav class="${clsx(
+    'utrecht-pagination',
+    distanced && 'utrecht-pagination--distanced',
+  )}"><span class="utrecht-pagination__before">${
+    prev ? LinkTemplate({ ...prev, rel: 'prev', textContent: 'Vorige' }) : ''
+  }</span><span role="group" class="utrecht-pagination__pages">${links
+    .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
+    .map((link, arrayIndex) => {
+      const index = typeof link.index === 'number' ? link.index : arrayIndex;
+      return {
+        index,
+        current: typeof currentIndex === 'number' && index === currentIndex,
+        rel:
+          typeof currentIndex === 'number'
+            ? index === currentIndex + 1
+              ? 'next'
+              : index === currentIndex - 1
+              ? 'prev'
+              : null
+            : null,
+        textContent: link.index || index,
+        ...link,
+      };
+    })
+    .map((link) => ItemTemplate(link))
+    .join('')}</span><span class="utrecht-pagination__before">${
+    next ? LinkTemplate({ ...next, rel: 'next', textContent: 'Volgende' }) : ''
+  }</span></nav>`;