@utrecht/web-component-library-stencil 1.0.0-alpha.203 → 1.0.0-alpha.206

package/dist/collection/icon/{error.stencil.js → web-component/error.stencil.js}

@@ -10,9 +10,9 @@ export class IconError {
   static get is() { return "utrecht-icon-error"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{facebook.stencil.js → web-component/facebook.stencil.js}

@@ -9,9 +9,9 @@ export class IconFacebook {
   static get is() { return "utrecht-icon-facebook"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{filter.stencil.js → web-component/filter.stencil.js}

@@ -10,9 +10,9 @@ export class IconFilter {
   static get is() { return "utrecht-icon-filter"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{information.stencil.js → web-component/information.stencil.js}

@@ -11,9 +11,9 @@ export class IconInformation {
   static get is() { return "utrecht-icon-information"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{instagram.stencil.js → web-component/instagram.stencil.js}

@@ -11,9 +11,9 @@ export class IconInstagram {
   static get is() { return "utrecht-icon-instagram"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{linkedin.stencil.js → web-component/linkedin.stencil.js}

@@ -10,9 +10,9 @@ export class IconLinkedin {
   static get is() { return "utrecht-icon-linkedin"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{list.stencil.js → web-component/list.stencil.js}

@@ -13,9 +13,9 @@ export class IconList {
   static get is() { return "utrecht-icon-list"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{loupe.stencil.js → web-component/loupe.stencil.js}

@@ -9,9 +9,9 @@ export class IconLoupe {
   static get is() { return "utrecht-icon-loupe"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{melding.stencil.js → web-component/melding.stencil.js}

@@ -9,9 +9,9 @@ export class IconMelding {
   static get is() { return "utrecht-icon-melding"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{paspoort.stencil.js → web-component/paspoort.stencil.js}

@@ -9,9 +9,9 @@ export class IconPaspoort {
   static get is() { return "utrecht-icon-paspoort"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{rijbewijs.stencil.js → web-component/rijbewijs.stencil.js}

@@ -12,9 +12,9 @@ export class IconRijbewijs {
   static get is() { return "utrecht-icon-rijbewijs"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

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

@@ -0,0 +1,7 @@
+export const IconExample = ({
+  color = 'blue',
+  icon = 'utrecht-icon-arrow',
+  size = 12,
+}) => `<div style="--utrecht-icon-color: ${color}; --utrecht-icon-size: ${size}px;">
+  <${icon}></${icon}>
+</div>`;

package/dist/collection/icon/{toeslag.stencil.js → web-component/toeslag.stencil.js}

@@ -9,9 +9,9 @@ export class IconToeslag {
   static get is() { return "utrecht-icon-toeslag"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{trouwen.stencil.js → web-component/trouwen.stencil.js}

@@ -8,9 +8,9 @@ export class IconTrouwen {
   static get is() { return "utrecht-icon-trouwen"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{twitter.stencil.js → web-component/twitter.stencil.js}

@@ -9,9 +9,9 @@ export class IconTwitter {
   static get is() { return "utrecht-icon-twitter"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{verhuizen.stencil.js → web-component/verhuizen.stencil.js}

@@ -13,9 +13,9 @@ export class IconVerhuizen {
   static get is() { return "utrecht-icon-verhuizen"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{warning.stencil.js → web-component/warning.stencil.js}

@@ -11,9 +11,9 @@ export class IconWarning {
   static get is() { return "utrecht-icon-warning"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{whatsapp.stencil.js → web-component/whatsapp.stencil.js}

@@ -9,9 +9,9 @@ export class IconWhatsapp {
   static get is() { return "utrecht-icon-whatsapp"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{zoomin.stencil.js → web-component/zoomin.stencil.js}

@@ -10,9 +10,9 @@ export class IconZoomin {
   static get is() { return "utrecht-icon-zoomin"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{zoomout.stencil.js → web-component/zoomout.stencil.js}

@@ -9,9 +9,9 @@ export class IconZoomOut {
   static get is() { return "utrecht-icon-zoomout"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/link-list/{bem.js → css/template.js}

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
-import { Link } from '../link/css/template';
+import { Link } from '../../link/css/template';
 
 export const LinkList = ({ links = [] }) => `<ul class="utrecht-link-list utrecht-link-list--html-ul">
   ${links.map((link) => `<li class="utrecht-link-list__item">${Link(link)}</li>`).join('\n  ')}

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

@@ -18,9 +18,9 @@ export class Logo {
   static get is() { return "utrecht-logo"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

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

@@ -0,0 +1 @@
+export const Logo = () => `<utrecht-logo></utrecht-logo>`;

package/dist/collection/logo-button/{stencil.js → web-component/index.stencil.js}

@@ -14,10 +14,10 @@ export class DigidButton {
   static get is() { return "utrecht-logo-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "type": {

package/dist/collection/logo-button/web-component/template.js

@@ -0,0 +1 @@
+export const DigidButton = () => `<utrecht-digid-button>Inloggen</utrecht-digid-button>`;

package/dist/collection/navigatie sidenav/{bem.css → web-component/index.css }

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.

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

@@ -18,10 +18,10 @@ export class Sidenav {
   static get is() { return "utrecht-sidenav"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "json": {

package/dist/collection/navigatie sidenav/web-component/template.js

@@ -0,0 +1 @@
+export const Sidenav = ({ json }) => `<utrecht-sidenav json="${json.replace(/"/g, '&quot;')}"></utrecht-sidenav>`;

package/dist/collection/navigatie topnav/{bem.js → css/template.js }

@@ -5,7 +5,7 @@
 
 import clsx from 'clsx';
 
-export const TopNav = ({ items }) => `<div class="utrecht-navhtml">
+export const Topnav = ({ items }) => `<div class="utrecht-navhtml">
   <nav class="topnav">
     <ul class="utrecht-topnav__list">${items
       .map(

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/{stencil.js → web-component/index.stencil.js}

@@ -12,9 +12,9 @@ export class Page {
   static get is() { return "utrecht-page"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["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/{stencil.js → web-component/index.stencil.js}

@@ -12,9 +12,9 @@ export class Page {
   static get is() { return "utrecht-page-content"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["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/{stencil.js → web-component/index.stencil.js}

@@ -11,9 +11,9 @@ export class PageFooter {
   static get is() { return "utrecht-page-footer"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.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/{stencil.js → web-component/stencil.js}

@@ -12,9 +12,9 @@ export class PageHeader {
   static get is() { return "utrecht-page-header"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["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/{stencil.js → web-component/index.stencil.js}

@@ -32,10 +32,10 @@ export class Pagination {
   static get is() { return "utrecht-pagination"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "links": {

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

@@ -0,0 +1,7 @@
+const attr = (name, value) => `${name}="${String(value).replace(/"/g, '"')}"`;
+
+export const Pagination = ({ currentIndex = -1, links = [], next = null, prev = null }) =>
+  `<utrecht-pagination ${attr('links', JSON.stringify(links))} ${attr('next', JSON.stringify(next))} ${attr(
+    'prev',
+    JSON.stringify(prev),
+  )} ${attr('current-index', currentIndex)}></utrecht-pagination>`;

package/dist/collection/select/{bem.js → css/template.js}

@@ -6,11 +6,17 @@
 
 import clsx from 'clsx';
 
+const exampleOptions = [
+  { value: '1', label: 'Option #1' },
+  { value: '2', label: 'Option #2', selected: true },
+  { value: '3', label: 'Option #3' },
+];
+
 export const defaultArgs = {
   disabled: false,
   focus: false,
   invalid: false,
-  options: [],
+  options: exampleOptions,
   required: false,
 };
 
@@ -31,9 +37,3 @@ export const Select = ({ disabled = false, focus = false, invalid = false, optio
     )
     .join('\n  ')}
 </select>`;
-
-export const exampleOptions = [
-  { value: '1', label: 'Option #1' },
-  { value: '2', label: 'Option #2', selected: true },
-  { value: '3', label: 'Option #3' },
-];

package/dist/collection/select/html/template.js

@@ -0,0 +1,26 @@
+const exampleOptions = [
+  { value: '1', label: 'Option #1' },
+  { value: '2', label: 'Option #2', selected: true },
+  { value: '3', label: 'Option #3' },
+];
+
+export const defaultArgs = {
+  disabled: false,
+  invalid: false,
+  required: false,
+  options: exampleOptions,
+};
+
+export const Template = ({ disabled = false, invalid = false, options = [], required = false }) =>
+  `<section class="utrecht-html">
+  <select${invalid ? ' aria-invalid="true"' : ''}${disabled ? ' disabled' : ''}${
+    required ? ' required' : ''
+  } class="utrecht-select">
+    ${options
+      .map(
+        ({ label, selected, value }) =>
+          `<option${selected ? ' selected' : ''}${value ? ` value="${value}"` : ''}>${label}</option>`,
+      )
+      .join('\n    ')}
+  </select>
+</section>`;

package/dist/collection/separator/html/template.js

@@ -0,0 +1,4 @@
+export const Separator = () =>
+  `<section class="utrecht-html">
+  <hr>
+</section>`;

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

@@ -6,9 +6,9 @@ export class Separator {
   static get is() { return "utrecht-separator"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

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

@@ -0,0 +1 @@
+export const Separator = () => `<utrecht-separator></utrecht-separator>`;

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

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const Surface = ({ innerHTML = '' }) => `<div class="${clsx('utrecht-surface')}">${innerHTML}</div>`;